设置表格单元格内容的最大高度

一尘不染

设置表格单元格内容的最大高度

css

我有一张桌子，应该始终占据屏幕高度的一定百分比。大多数行的高度都是固定的，但我有一排应该伸展以填充可用空间。万一该行中单元格的内容超出了所需的高度，我希望使用overflow：hidden剪切内容。

不幸的是，表和行不遵守max-height属性。（这在W3C规范中）。当单元格中的文本过多时，表格将变高，而不是坚持指定的百分比。

如果我为其指定一个固定的高度（以像素为单位），则可以使表格单元格表现出来，但这违背了将其自动拉伸以填充可用空间的目的。

我试过使用div，但似乎找不到魔术公式。如果我将div与display：table，：table-row和：table-
cell一起使用，则div的作用就像一个表。

关于如何在表上模拟max-height属性的任何线索？

<head>
    <style>
        table {
            width: 50%;
            height: 50%;
            border-spacing: 0;
        }
        td {
            border: 1px solid black;
        }
        .headfoot {
            height: 20px;
        }
        #content {
            overflow: hidden;
        }
    </style>
</head>
<body>
<table>
    <tr class="headfoot"><td>header</td></tr>
    <tr>
        <td>
        <div id="content">
            put lots of text here
        </div>
        </td>
        <tr>
    <tr class="headfoot"><td>footer</td></tr>
</table>
</body>

阅读 380

2020-05-16

共1个答案

一尘不染

我们终于找到了答案。首先是问题：表格始终围绕内容调整大小，而不是强制内容适合表格。那限制了您的选择。

我们通过将content div设置为display：none来实现它的大小，然后让表本身大小，然后在javascript中将content
div的高度和宽度设置为封闭的td标签的内部高度和宽度。显示内容div。调整窗口大小时，请重复此过程。

2020-05-16