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。这是第一张表的情况。但是包含24px div的单元格的第二个表的高度为32px。我不明白为什么。看起来像一个24x24 div应该适合内部精细而不增加单元高度。

任何人都可以解释为什么会发生这种情况以及如何解决它以便我可以将细胞保持在27px的高度？我目前正在使用FireFox 29进行测试。

感谢您的帮助。

Answer 1

如果您要显示表格数据，那么就可以了：）

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

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

Have a fiddle

.ico

Answer 2

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

检查this jsfiddle for example：

<强> 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元素。 id用于此类目的（我怀疑）。因此，出于布局目的，div是可行的方法，但如果关注语义，则使用表是最佳解决方案。

Answer 3

尝试在CSS中添加此内容

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

Answer 4

看起来像vertical-align：baseline;应用于所有标签表，tr，td搞砸了。删除它并试一试。

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

4 个答案: