html - 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%;
}

Answer 1

首先，划分您的 <table>在语义上指向内部的标题 <thead>和里面的内容<tbody> .

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

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

jsFiddle Demo