Javascript 在HTML表上启用垂直滚动

我正在创建一个表并使用javascript填充它。我想在表格中添加一个垂直滚动条，但仅在数据上，即我希望表格标题保持不变，即不包括在滚动条中

我只想使用javascript、CSS和有效的HTML5元素。在这个阶段，我想排除jQuery。关于这个主题已经有很多讨论，通常包括水平滚动条。我只对垂直滚动感兴趣，对我来说，滚动时标题列必须与表数据对齐是至关重要的。讨论和我为实现这一目标所做的努力使我相信这是不可能的。如果不是这样，有人能告诉我这是怎么做到的吗

到目前为止，我已经做了很多尝试。添加

        table {
            display: block;
            height: 300px;
            overflow: scroll;
        }

导致整个表格（包括标题和数据）垂直滚动，但标题和数据是对齐的。添加 泰德{ 显示：块； } t车身{ 显示：块； 高度：300px； 溢出：滚动； } 导致标题不滚动，但标题和数据列不再对齐。似乎正在发生的是，标题列的宽度不再考虑数据列

我尝试过许多其他方法，但都没有成功。我已经取得了部分成功，根据标题和数据值的最大字段大小（以字符为单位），向标题和数据字段列添加了相同的宽度值。通过这种方法，我可以使标题与大多数列的数据对齐。但是，我不认为这是一个适当的解决方案，因为通常不可能，或者至少很难确定em、px或mm中的一个值，该值将精确地容纳n个字符

在我看到的讨论中，似乎我想要实现的是使用jQuery。我还没有接受jQuery，但是如果它可以轻松地实现我想要的，那么现在可能是时候了。有人能确认我想要的东西在jQuery中是否可行吗

---

我发现很难相信我想做的事情不容易实现，因为我认为这对于任何表的适当处理都是必不可少的。

也许不是您想要的答案，但一个相当简单的解决方案是将所有可滚动的行和列放在一个可滚动的div中，并将页眉和页脚保持在该分区之外。

如果您愿意将列设置为固定宽度，您基本上可以创建两个表，一个用于页眉，一个用于正文，然后只需在正文上设置滚动

HTML:

---

看看这个。

遗憾的是，这不是一件小事。不应该这样，你可能认为我们可以说“滚动

tbody

元素”，但遗憾的是，不应该。你可能想使用几个表插件中的任何一个，而不是自己编写。你能在中提供一个HTML输出示例吗？根据要求，我已经设置了一个示例。这包括Bradley Trager提出的使用显式列宽的建议。我已经尝试过了，在我的原始屏幕中使用javascript设置了这些宽度。然而，我并不认为这是一个可行的解决方案：a）这是复杂的，b）它是不稳定的，因为几乎不可能使列的大小恰好适合容纳字段，而一个小的更改，如更改页眉字体大小，将打破它。

<table class="header">
    <thead>
        <td>Header</td><td>Header</td><td>Header</td>
    </thead>
</table>
<table class="body">
    <tbody>
        <tr><td>data</td><td>data</td><td>data</td></tr>
        ...
    </tbody>
</table>

td, th{
    width:50px;
}
table.body{
     display: block;
     height: 300px;
     width:200px;
     overflow: scroll;
}