Frozen table header inside scrollable div

Question

I\'ve three divs. Header, central and footer. There is a table in central div (gridview) which is almost always longer than outer div. So I\'ve made this div scrollable vert

Answer 1

You would have to put the header outside the scrollable div. Everything within the div will scroll.

EDIT

Regarding the width if you go for a separate header, I can see a few solutions:

• Assuming this is dynamic content, generate "fixed" widths based on the length of the string. Obviously specify in terms of EMs and leave some margin for error.
• Use javascript.
• Use fixed width columns.

I haven't actually tried the first, and it might be overcomplicating things a bit. It's something to try if you're desperate for the effect though.

I should also mention that there are probably javascript libraries with table widgets that do this already. Have a look at them to see how they do it.