html - 固定标题表，可滚动主体占据可调整大小的 DIV 的 100% 高度

Question

我有一个表格，我实际上希望它有一个固定的标题，并允许滚动表格中的行，而标题行保持静态。此外，我希望表格的正文部分占据呈现标题行后留下的包含元素中的剩余高度。

到目前为止，我有两个表，第一个包含一个 thead、tr 和多个 th，第二个包含带有多个 tr 的 tbody，每个带有多个 td，如下所示:

<table>
    <thead>
        <tr>
            <th>Heading 1</th>
            <th>Heading 2</th>
            <th>Heading 3</th>
            <th>Heading 4</th>
            <th>Heading 5</th>
        </tr>
    </thead>
</table>
<div style="overflow:scroll">
    <table>
        <tbody>
            <tr><td /><td /><td /><td /><td /></tr>
            <tr><td /><td /><td /><td /><td /></tr>
        </tbody>
    </table>
</div>

我做了一些研究，发现在 DIV 上设置如下样式可以使其缩放到其包含元素的高度

position:absolute;
height:auto;
top:0;
bottom:0;

问题在于，在包含标题的表格和包含正文的表格上设置绝对位置会将它们设置为在包含元素内的 0, 0 处呈现。我可以为 CSS top 属性指定一个像素值，但这会使它更严格。

是否有一些我没有想到的关键 CSS 定位值或组合可以帮助我实现所有这些？

Answer 1

I could specifiy a pixel value for the CSS top property but this makes it more rigid.

是的，但这是您想要的，不是吗？

这确实是唯一的解决方案。