在可滚动的Div中固定表头

Question

在可滚动的Div中固定表头

5

我的代码如下：

<div>Some Page Content </div>

<div style="max-height: 200px; overflow: auto;">
<table id="test">
<thead>
<tr>
<th>
</th>
</th>
</thead>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>

<div>Some Page Content </div>

我想让 Div 有一个垂直滚动条，所以如果它超过了最大高度，我可以得到一个工作正常的滚动条。

现在我尝试将标题固定

我尝试使用 position:Fixed for TH，它使标题在整个页面上保持固定。我看到了一些关于固定标题的帖子，但由于大多数回答都比较老，我对实现这些的最佳方式感到困惑。

我的输出应该是像这样：表格应该可滚动，表头只对该表格进行固定，而不是整个页面。

希望能找到一个简单而更好的方法来实现这一点

谢谢

- user2067567

2个回答

0

使用

position:absolute

在父元素上使用position:relative，以便子元素可以使用绝对定位。您需要详细了解定位。我建议您参考this tutorial。这是快速掌握定位的方法。

- aBhijit

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Gimmy · Accepted Answer

你可以尝试将页眉与内容分开：http://jsfiddle.net/u2xZU/，并将页眉放在可滚动的内容外面。

基本上，使用两个表格，一个用于页眉，一个用于内容：

<div>Some Page Content </div>
    <table>
            <thead>
                <tr>
                    <th>Head1</th>
                    <th>Head2</th>
                    <th>Head3</th>
                </tr>
            </thead>
    </table>
    <div style="max-height: 200px; overflow: auto;">
        <table id="test">
            <tbody>
                <tr> <td>content</td> <td>content</td> <td>content</td> </tr>
                <tr> <td>content</td> <td>content</td> <td>content</td> </tr>
                <tr> <td>content</td> <td>content</td> <td>content</td> </tr>
                <tr> <td>content</td> <td>content</td> <td>content</td> </tr>
                <tr> <td>content</td> <td>content</td> <td>content</td> </tr>
                <tr> <td>content</td> <td>content</td> <td>content</td> </tr>
                <tr> <td>content</td> <td>content</td> <td>content</td> </tr>
                <tr> <td>content</td> <td>content</td> <td>content</td> </tr>
                <tr> <td>content</td> <td>content</td> <td>content</td> </tr>
                <tr> <td>content</td> <td>content</td> <td>content</td> </tr>
            </tbody>
        </table>
    </div>
<div>Some Page Content </div>