固定头表，可滚动体占据100％高度的可调整大小的DIV [英] Fixed header table, scrollable body to occupy 100% height of resizable DIV

问题描述

我有一个表，我有效地想有一个固定的标题，并允许表中的行滚动通过，而标题行保持静态。此外，我希望表格的body部分占据在渲染标题行后留下的包含元素中的剩余高度。

I have a table which I effectively want to have a fixed header and allow the rows in the table to be scrolled through while the header row remains static. In addition, I want the body section of the table to take up the remaining height in the containing element that is left after the header row is rendered.

到目前为止，我有两个表，第一个包含一个aad，tr和多个th，第二个包含具有多个tr的tbody，每个具有多个td，如下：

So far I have two tables, the first contains a thead, tr and multiple th, the second contains the tbody with multiple tr each with multiple td, like so:

<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上设置一个样式如下缩放到其包含元素的高度

I've done some research and found out that setting a style up as follows on a DIV makes it scale to the height of its containing element

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

问题是，在包含标题的表和包含主体将它们设置为在包含元素内的0,0处呈现。我可以指定CSS顶部属性的像素值，但这使它更刚性。

The problem is that setting a position of absolute on both the table containing the header and the table containing the body sets them to render at 0, 0 within the containing element. I could specifiy a pixel value for the CSS top property but this makes it more rigid.

有一些关键的CSS定位值或组合，我不在想

Is there some key CSS positioning value or combination that I'm not thinking of that could help me achieve all of this?

推荐答案

我可以指定CSS顶部的像素值

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

它？

这真是唯一的解决方案。

That's really the only solution.

这篇关于固定头表，可滚动体占据100％高度的可调整大小的DIV的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！