Html 固定了可滚动Div内表中的标题

下面是我的代码

<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

，它的作用是在整个页面中保持页眉固定。我在固定标题上看到了一些关于相同的帖子，我对实现这些的最佳方式感到困惑，因为大多数都是旧答案

我的输出应该像Div（Table）一样，应该是可滚动的，并且只有该表的标题是固定的，而不是整个页面的标题

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

谢谢使用

position:absolute

---

并在父元素上使用

position:relative

，相对于父元素它应该是绝对的。您需要详细了解定位。我推荐你。这是获得定位的快速方法

您可以尝试将标题与内容分开： 并将标题放在可滚动内容之外

基本上，使用两个表，一个用于标题，一个用于内容：

<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>

某些页面内容
标题1
标题2
总目3
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
一些页面内容

是否可以使用这种方法对列进行排序？排序需要javascript或其他脚本。或者您可以在输出到表之前在Excel中进行排序。我认为这是一种错误的方法，如果行中有其他内容，则该表结构将破坏列。使用

content new

代替

content

word这很有意义，但现在必须使标题与表内容的宽度相同。在JSFIDLE中，将内容更改为更宽—它不再排队。这不是一项容易的任务。