如何防止表格中的该div增加单元格高度？

Question

我在这里有一个问题的例子： http : //jsfiddle.net/s6t3p/

我有以下标记：

<h1>Just Text</h1>
<table>
    <tr>
        <td class='cell'>Some Text</td>
        <td class='cell'>More Text</td>
    </tr>
</table>


<h1>With Icon Cell</h1>
<table>
    <tr>
        <td class='cell'>Some Text</td>
        <td class='cell-ico'><div class='ico'></div></td>
        <td class='cell'>More Text</td>
    </tr>
</table>

以及以下CSS：

table,td,tr
{   
    margin: 0; padding: 0;
    border: none; outline: none;
    font-size: 100%; font: inherit;
    vertical-align: baseline;
}

table  { border-collapse: collapse; border-spacing: 0;}
.cell 
{
    border:solid 1px #DDD; padding:0 5px; text-align:left;
    line-height:27px;
}
.ico {width:24px; height:24px; background:#05F;}

我希望每个单元格的高度为27px。 第一个表就是这种情况。 但是第二个表格包含一个div值为24px的单元格，其高度为32px。 我不明白为什么。 似乎24x24 div应该适合内部精细而不增加像元高度。

谁能解释为什么会这样以及如何解决它，以便我可以将单元格的高度保持在27px？ 我目前正在使用FireFox 29进行测试。

谢谢你的帮助。

Answer 1

如果您希望显示表格数据 ，那么这就是方法：)

该行为是由vertical-align: baseline;引起的vertical-align: baseline; 。

只需重置.cell-ico的vertical-align并提供设置的高度即可。 将.ico的高度设置为100％。

摆弄

.cell-ico {
    height: 24px;
    vertical-align: top;
}
.ico {
    width:24px;
    height: 100%;
    background:#05F;
    display: block;
}

Answer 2

我建议您使用div元素，并将它们各自的显示属性设置为table ， table-row, table-cell等。而不是实际的表。 从HTML4开始，不建议将表格用作布局技术。 这种方法可能有点笨重，但是出于布局目的，它将为您节省一些处理CSS的麻烦。

检查此jsfiddle例如 ：

HTML ：

<div id="Table">
    <div class="row">
        <div class="cell">Lorem ipsum</div>
        <div class="cell">Lorem ipsum</div>
    </div>
    <div class="row">
        <div class="cell">Lorem ipsum</div>
        <div class="cell">Lorem ipsum</div>
    </div>
</div>
<br/>
<br/>
<div id="Table">
    <div class="row">
        <div class="cell2"><div class="oddDiv">im inside a div</div></div>
        <div class="cell2">Lorem ipsum</div>
    </div>
    <div class="row">
        <div class="cell2">Lorem ipsum</div>
        <div class="cell2">Lorem ipsum</div>
    </div>
</div>

CSS ：

#Table {
    display: table;
    width: 200px;
    border-collapse: collapse;
}

.row {
    display: table-row;
}

.cell {
    display: table-cell;
    border: 1px solid blue;
    height: 27px;
}

.cell2 {
    display: table-cell;
    border: 1px solid red;
    height: 24px;
}

.oddDiv {
    height: 24px;
    width: 24px;
    overflow: hidden;
}

关于语义的更新 ：

确实，从开发人员的角度来看，表标记元素和div之类的通用容器之间在表的外观和代码理解方面都没有区别。 但是，无障碍工具（例如屏幕阅读器）无法辨别一堆具有不同ID的div元素，除非该工具是专有的，或者有某种特殊的约定用于特殊目的以用于此类目的（我对此表示怀疑）。 因此，出于布局目的，div是最好的解决方法，但是如果要考虑语义，则使用表是最好的解决方案。

Answer 3

尝试将其添加到您的CSS中

td{
   vertical-align:middle;
   height:27px;
}

Answer 4

看起来像垂直对齐：基线； 应用于所有标签表，tr，td将其弄乱了。 删除并尝试。