How can I fix a table header that has multiple sortable rows? (See attachment) Currently the light blue area with the drop downs is fixed and the gray header with double rows and the colored rows beneath it scroll. I want the colored rows to scroll but the header remain fixed. When I try to use position: fixed, the header jumps over to the left and re-sized randomly. Since the scroll bar's top edge should be flush with the bottom of the header, I don't want the header to expand to take up the space on the right otherwise the headers column's won't link up with the colored row columns. I tried so many variations but can't seem to figure out what is needed.
Doesn't even look like tabular data -- looks like a FORM, so put the form BEFORE the table, NOT in it! Wait... do you mean what should be a THEAD row of TH? If so, tables aren't designed to do what you are asking... though if you are showing enough rows that there's a need to try and fix that THEAD, (you are using a THEAD, right?!? TH with scope="col"?) you should probably add pagination and show less rows at once... though that's the case any time you would put a scrollbar on the table instead of the page. You MIGHT be able to pad the top of a DIV around the table, then aPo the THEAD, but I'm not sure that would work reliably cross-browser.