如何保持表头固定，而向下滚动表

我这里有一个的jsfiddle：http://jsfiddle.net/7vv9e/2/如何保持表头固定，而向下滚动表

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

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

下面是CSS代码在此它显示该表的滚动条时表达到一定高度：

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

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

感谢

来源

2012-12-19 user1881090

将表头分离出来并放在另一个div中。 –

可能的重复q？ http://stackoverflow.com/questions/7284239/static-html-table-header-code – orolo

看到这个答案http://stackoverflow.com/questions/4709390/table-header-to-stay-fixed-at-the -top-when-user-scroll-it-out-of-view-with-jque – bUKaneer

见

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

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

他使用

thead, tbody { 
    display: block; 
}

来源

2012-12-19 19:46:53 maddoxej

这不起作用100％列宽不再是动态的并且正确对齐。这几乎是以表格方式显示数据的全部要点： http://jsfiddle.net/Tq23B/1/ – RavenHursT

如果代码要动态添加数据，那么它还需要告诉头部调整大小本身。请参阅http://stackoverflow.com/questions/3453237/how-to-resize-a-table-cell-using-jquery，以获得一个很好的解决方案，它扩展了jquery调整大小以调整表头元素的大小，使其与第一个元素具有相同的宽度行中的数据。 – maddoxej

对..这是这个答案的完成。想知道是否有人知道如何做到这一点，以便浏览器的渲染引擎仍然处理列的宽度，因为它与“香草表？ – RavenHursT

它还可通过保持表格标题上一个div来完成{ overfl ow：none}和另一个div的表体。您可以使滚动事件中的表头与水平内容表保持同步。使用表格布局：固定，以便应用的列宽保持不变。在获取内容表上的滚动条之后，通过给予额外的td最后调整标题表以获得与内容表相同的精确宽度。

来源

2015-07-30 06:09:58

你会照顾创建一个例子吗？ – azerafati

如何保持表头固定，而向下滚动表

回答

相关问题