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>等本机标记还是使用display: table-cell启用的CSS），都会将其解释为最小值。

表单元格的高度将根据需要扩展以容纳内容，然后将确定包含单元格的表格行的高度。

参考：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），直到行缩小到最大高度（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 Table Solution Max Height Limit For Rows Or Cells By Increasing Table Width, Javascript

表格单元的最大高度

4 个答案:

如何修复表格单元格中的高度