如何在向下滚动表格时保持表格标题固定 [英] How to keep table headers fixed while scrolling down a table

问题描述

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

I have a jsfiddle here: http://jsfiddle.net/7vv9e/2/

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

In this fiddle when you open it up and you see the little demo, click on the "Add Question" button multiple times until you see a scroll bar appear next to the table.

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

Now what I want to happen is tht when the user scrolls, the header remainns fixed while scrolling. My question is how can this be done.

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

Below is the css code where it displays the scroll bar for the table when the table reaches a certain height:

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

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

i.e The current table you see in the demo is not the final table. There will be more columns added. So I need a solution where it could work for a table with 2 columns or a table with 5 columns it doesn't matter on the width of the column, if each column can remain it's same width without any problems while scrolling down then this could be great.

谢谢

推荐答案

见

如何滚动表格的tbody"独立于thead"?

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

他使用

thead, tbody {
    display: block;
}

这篇关于如何在向下滚动表格时保持表格标题固定的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！