html - 表格单元格的最大高度

Question

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

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

参见小提琴：http: //jsfiddle.net/HPtB2/1

Answer 1

当height属性应用于表格单元格时（无论是使用原生标签 like<td>还是启用 CSS 的 like 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。

如果需要滚动条等，也可以设置溢出属性。

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

Answer 2

<br>从您的 html中删除

<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