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

Answer 1

See

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

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

he uses

thead, tbody {
    display: block;
}