Fixed table headers with scrolling body
I need to have a table displayed within a form on a webpage, but the content of the table could get large. In order for it to not mess up the layout of the form, I'd like to make the table be displayed within a scrollable div. I've done this already with no problem by simply doing something like this:
<div style="height: 200px; overflow: auto;">
However, I'd like to keep the column headers from scrolling. I can create another table outside of the scrolling div with just the column headers in them, but then they don't like up properly with the columns in the table inside the scrolling div. Because they aren't the same table, the widths are different.
The only solution that works this way is to set fixed widths for all the columns in both the inside table and the outer table with column headers in it. But that won't work for me because I want the table to be liquid and shrink or expland depending on the width of the browser window.
I've messed with moving the height and overflow settings to the <tbody> tag, but this doesn't seem to work. It makes each row of the table the value of the height tag, and doesn't do anything to scroll it. For instance:
<tbody style="height: 200px; overflow: auto;">
Does anyone have any ideas or solutions to this problem?