css：表格可水平和垂直滚动，带有固定标题

Question

如何使用 css 实现一个可水平和垂直滚动且具有固定标题的表格？

我发现这个 Scrolling a div from an outer div ，但它是通过使用 Javascript/Jquery 实现的。有什么方法可以只使用 CSS 来实现它吗？

更新后的代码：

 #div-table-content {
width: 100%;
overflow-x: auto;
}

table {
font-size: 12px;
white-space:nowrap;
overflow-x: scroll;
}

tbody {
height: 400px;
overflow-y: auto;
width: 100%;
display: block;
}

thead tr {
display: block;
width: 100%;
}

原文由 Cacheing 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

首先，将您的 <table> 在语义上划分为 --- 中的标题和 --- <tbody> <thead> 中的内容。

然后，对于垂直滚动，给你的 <tbody> 一个固定的高度并设置 overflow-y: auto 和 display: block 。

对于水平滚动，我相信你必须用一个容器包裹你的整个表格（比如说 <div> 并给它一个固定的宽度和 overflow-x: auto 。

jsFiddle 演示

原文由 Itay 发布，翻译遵循 CC BY-SA 3.0 许可协议