html - 如何为表格单元格添加固定高度？

Question

我创建了一个我想在 jsfiddle 中使用的可滚动表格，但我无法让表格单元格具有固定高度或最大高度。在查看我的示例时，您可能需要缩小浏览器宽度才能明白我在说什么:

https://jsfiddle.net/trleithoff/jz62aenk/5/

table, tr td {
    border: 1px solid black;
    overflow: hidden;
    text-overflow: ellipsis;
    max-height: 30px;
    height: 30px;
}
tbody {
    display: block;
    height: 125px;
    overflow: auto;
}
thead, tbody tr {
    display: table;
    width: 100%;
    table-layout: fixed;
}

在第一个表格单元格(第 1 行第 1 列)中，文本过多，省略号有效，但它是每行有效，而不是整个文本 block 。有谁知道如何在表格单元格上强制固定高度？

Answer 1

table-cells 不适用于 overflow: hidden。只需使用 max-height 和 overflow: hidden

将内容包裹在 div 中的表格单元格中

tbody tr td div{
  max-height: 30px;
  overflow: hidden;
}