如何在向下滚动表格时保持表头固定

Question

我在这里有一个jsfiddle：http://jsfiddle.net/7vv9e/2/

在这个小提琴中打开它并看到小演示时，多次单击“添加问题”按钮，直到您看到表格旁边出现滚动条。

现在我想要发生的是当用户滚动时，标题在滚动时保持固定。我的问题是如何做到这一点。

下面是css代码，当表达到一定高度时，它会显示表格的滚动条：

#details{
    height:500px;
    overflow:auto;
}

即您在演示中看到的当前表格不是最终表格。将添加更多列。所以我需要一个解决方案，它可以用于一个有2列的表或一个有5列的表，它与列的宽度无关，如果每列可以保持相同的宽度而没有任何问题，而向下滚动则可以太棒了。

由于

Answer 1

见

How to scroll table's "tbody" independent of "thead"?

他的演示 http://jsfiddle.net/nyCKE/2/

他使用

thead, tbody {
    display: block;
}

Answer 2

也可以通过将表头保留在div {overflow：none}和另一个div上的表体来完成。您可以在滚动事件上将标题表与内容表水平同步。使用table-layout：fixed以使应用的列宽保持不变。还有一件事是通过在最后获得一个额外的td来调整标题表，以便在内容表上获得滚动条后获得与内容表相同的准确宽度。