表格單元的最大高度

Question

如何設置表格單元格的高度？ 將display:block和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：

body {
    margin: 0
}
#table {
    display: table;
    width: 100%;
    height: 30px;
    /* ignored */
}
#table-cell1 {
    display: table-cell;
    width: 80px;
    background-color: yellow;
}
#table-cell2 {
    display: table-cell;
    background-color: gray;
    color: white;
}
.inner-cell {
    border: 1px dashed blue;
    height: 30px;
    overflow: auto; /* optional: if needed */
}

技巧是為塊級容器.inner-cell設置一個固定的（或最大）高度值。

如果需要滾動條等，還可以設置overflow屬性。

參見演示小提琴： http : //jsfiddle.net/audetwebdesign/mNcm5/

Answer 2

從您的html中刪除<br>

<div id="table-cell2">table cell 2  Table  Cell</div>

加：

div {    
 white-space:nowrap;
    }

Answer 3

這是你所追求的嗎？ 你很模糊

#table-cell1{
display: table-cell;
width: 80px;
height:200px;
background-color: yellow;
}

Answer 4

使用Javascript限制表中所有單元格或行的最大高度：

該腳本適用於水平溢出表。

該腳本每次將表格寬度增加300px，最大增加4000px），直到行縮小到max-height（160px）為止，您還可以根據需要編輯數字。

var i = 0, row, table = document.getElementsByTagName('table')[0], j = table.offsetWidth;
while (row = table.rows[i++]) {
    while (row.offsetHeight > 160 && j < 4000) {
        j += 300;
        table.style.width = j + 'px';
    }
}

資料來源： HTML表格解決方案通過增加表格寬度來增加行或單元格的最大高度限制，JavaScript