html - 修复了可滚动 Div 内表格中的标题

Question

下面是我的代码

<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 并且它所做的是它使标题在整个页面中保持固定。我在 Fixed header 上看到了很少的帖子，并且对实现这些的最佳方法感到困惑，因为它们中的大多数都是旧答案。

我的输出应该像 Div(Table) 应该是可滚动的，并且仅针对该表格而不是整个页面的标题为 Fixed。

希望有一个简单且更好的方法来实现这一目标

谢谢

Answer 1

您可以尝试将标题与内容分开: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>