表格单元的最大高度

Question

如何设置表格单元格的高度？将display:blockand 设置overflow: hidden为#table 并不是一个好的解决方案。＃table-cell1和＃table-cell2（以及整个表格）应该为30px。怎么解决？

如果文本太多，则将div调整为相同的大小。在这种情况下，＃table-cell2的高度为100px，即使有太多文本，也应保持固定为30px！

请参阅以下网址的小提琴：http : //jsfiddle.net/HPtB2/1

Answer 1

当该height属性应用于表格单元时（无论是使用本地标记<td>还是CSS启用display: table-cell），它都将被解释为最小值。

表格单元格的高度将根据需要扩展以容纳内容，这将反过来确定包含该单元格的表格行的高度。

参考：http : //www.w3.org/TR/CSS2/tables.html#height-layout

如何在表格单元格中固定高度

在表格单元格中设置固定高度的一种方法是使用包装器为表格单元格的内容：

<div id="table">
    <div id="table-cell1">
        <div class="inner-cell">table cell 1</div>
    </div>
    <div id="table-cell2">
        <div class="inner-cell">table cell 2
            <br/>Table
            <br/>Cell</div>
    </div>
</div>

并应用以下CSS：

<div id="table">
    <div id="table-cell1">
        <div class="inner-cell">table cell 1</div>
    </div>
    <div id="table-cell2">
        <div class="inner-cell">table cell 2
            <br/>Table
            <br/>Cell</div>
    </div>
</div>

诀窍是为块级容器设置固定的（或最大）高度值.inner-cell。

如果需要滚动条等，还可以设置overflow属性。

参见演示小提琴：http : //jsfiddle.net/audetwebdesign/mNcm5/