javascript - 在 HTML 表格上启用垂直滚动

Question

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

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

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

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

导致整个表格垂直滚动，包括表头和数据，但表头和数据是对齐的。添加 头{ 显示: block ； } body { 显示: block ； 高度:300px； 溢出:滚动； } 导致标题不滚动，但标题和数据列不再对齐。似乎正在发生的事情是标题列的宽度不再考虑数据列。

我尝试过许多其他方法，但均未成功。通过根据标题和数据值的最大字段大小(以字符为单位)向标题和数据字段列添加相同的宽度值，我取得了部分成功。通过这种方法，我可以让标题与大多数列的数据对齐。但是，我不认为这是一个合适的解决方案，因为通常不可能，或者至少很难确定一个以 em、px 或 mm 为单位的值，它可以准确地容纳 n 个字符。

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

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

Answer 1

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