如何在不移动表头的情况下滚动表格的主体？

Question

我希望我的tbody可以滚动，同时让thead保持静态。这是我尝试的代码，但它不起作用

tbody {
  height: 200px;
  overflow: auto
}

我也尝试使用overflow:scroll;，但这不起作用

Answer 1

在I need my html table's body to scroll and its head to stay put

查看答案

根据其中一位评论者的说法this may be the most universal solution。

一般概念是将标题放入<thead>标记，并设置overflow: auto以在需要时显示滚动条（或overflow: scroll总是出现。）

Answer 2

有一些纯CSS和HTML黑客，但它们使用的东西如嵌套表，嵌套在表中的div，或嵌套在div中的表，或使用跨度而不是th单元格。也就是说，你的桌子不再像桌子了。

我的建议：使用众多jQuery插件中的一个，它可以让你将表编码为一个表，并隐藏你的黑客。 DataTables可以执行此操作，以及许多其他便捷功能（例如可排序列，搜索字段，可重新订购的列等）。

您也可以使用FixedHeader插件而不使用其他DataTables功能，如this example所示。这有一个有趣的转折：表的高度保持动态，但在滚动整个页面时，列名将始终显示在页面顶部。你不必这样做;您可以使用固定的页眉和页脚固定表格高度，如我链接到的第一个示例所示。