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

Question

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

我发现这个Scrolling a div from an external 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%;
}

Answer 1

首先，在<table>语义上将您的内容分为 headers inside<thead>和 content inside <tbody>。

<tbody>然后，对于垂直滚动，为您的和 设置overflow-y: auto和提供固定高度display: block。

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

jsFiddle Demo