How to keep table headers fixed while scrolling down a table

Question

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.

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

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.

Thanks

Separate the table header out of the table and put it in another div. — 001, Dec 19 '12 at 19:19
Possible repeat q? http://stackoverflow.com/questions/7284239/static-html-table-header-code — orolo, Dec 19 '12 at 19:24
see this answer http://stackoverflow.com/questions/4709390/table-header-to-stay-fixed-at-the-top-when-user-scrolls-it-out-of-view-with-jque — Luke Baughan, Dec 19 '12 at 19:25
@JohnnyMopp can you provide a sample code on what you mean by seperating the tables headers and put it in another div in an answer plz? — user1881090, Dec 19 '12 at 19:27
@bUKaneer I don not want it to be fixed on window scrolling down. but I tried the `position: fixed;` in the css for each column's `` but that had no luck. — user1881090, Dec 19 '12 at 19:31
If somebody can provide a working sample in the fiddle provided then it will be greatly appreciated — user1881090, Dec 19 '12 at 19:33
There is a second answer on that link that does so w/out jQuery; however, it's the olde two separate table solution. — orolo, Dec 19 '12 at 21:20

score 3 · Accepted Answer · edited May 23 '17 at 11:45

3

See

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

And his demo http://jsfiddle.net/nyCKE/2/

he uses

thead, tbody {
    display: block;
}

edited May 23 '17 at 11:45

Community

1
1

answered Dec 19 '12 at 19:46

maddoxej

1,662
13
19

1

This doesn't work 100% Column widths are no longer dynamic and correctly aligned. Which is pretty much the entire point of displaying data in a tabular manner: http://jsfiddle.net/Tq23B/1/ – RavenHursT Apr 28 '14 at 21:30
1

If the code is going to add data dynamically, then it also needs to tell the header to resize itself. See http://stackoverflow.com/questions/3453237/how-to-resize-a-table-cell-using-jquery for a good solution that extends jquery resize to resize the table head cell to have the same width as the first row in the data. – maddoxej Apr 29 '14 at 16:27
Right.. so that's a completion of this answer.. Just wondering if anyone knows of a way to do this so that the browser's rendering engine still handles column widths as it does with a "vanilla table? – RavenHursT Apr 29 '14 at 20:27

score 0 · Answer 2 · answered Jul 30 '15 at 06:09

0

It can also be done by keeping table header on a div{overflow:none} and table body on another div. You can keep header table in sync with content table horizontally on scroll event. Use table-layout: fixed so that applied column width remain same. One more thing adjust header table by giving an extra td at last to get accurate width as same as content table after getting a scroll bar on content table.

answered Jul 30 '15 at 06:09

Kunal Gupta

41
4

1

would you care to create an example? – azerafati Dec 02 '16 at 06:21

How to keep table headers fixed while scrolling down a table

2 Answers2