javascript - How to keep table headers fixed while scrolling down a table - Stack Overflow

admin管理员组

文章数量:1291176

I have a jsfiddle here: /

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

I have a jsfiddle here: http://jsfiddle/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

• javascript
• html
• css

Share Improve this question Follow asked Dec 19, 2012 at 19:15 user1881090user1881090 74155 gold badges1717 silver badges3535 bronze badges 9

• Separate the table header out of the table and put it in another div. – 001 Commented Dec 19, 2012 at 19:19
• Possible repeat q? stackoverflow./questions/7284239/… – orolo Commented Dec 19, 2012 at 19:24
• see this answer stackoverflow./questions/4709390/… – Luke Baughan Commented Dec 19, 2012 at 19:25
• @orolo I do not want to use a jquery plugin for this. – user1881090 Commented Dec 19, 2012 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 Commented Dec 19, 2012 at 19:27

 |  Show 4 more ments

2 Answers 2

Sorted by: Reset to default 3

See

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

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

he uses

thead, tbody {
    display: block;
}

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.

本文标签： javascriptHow to keep table headers fixed while scrolling down a tableStack Overflow