Question

我有一个表，我实际上希望有一个固定的标题，并允许表格中的行滚动，而标题行保持静态。另外，我希望表的body部分占用标题行渲染后留下的包含元素中的剩余高度。

到目前为止，我有两个表，第一个包含一个thead，tr和多个表，第二个包含tbody，其中多个tr各有一个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

我可以为CSS top属性指定一个像素值，但这会使它更加严格。

是的，但是你想要的，不是吗？

这是唯一的解决方案。

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

1 个答案: