How do I lock the header rows of an HTML table from scrolling?

Question

Is there a way to "lock" the header row of an html table of results so that when the browser window scrolls, the header rows remain visible. I need it to work under IE7+/Firefox/Safari/Chrome.

Can this be done with CSS alone, or will I need javascript.

Any tips appreciated.

Answer 1

AFAIK, you cannot "lock" any sub-element in a table. So the best approach I know is to use a positioned element (as per my comment):

<div style="position:fixed">
  <!-- you could have multiple <div> or <span> for the table "header" -->
</div>
<table>
  ...
</table>

One thing you might encounter is that you may have to play with the width of the elements inside the positioned div. So, you might find it easier to simply drop the <table> all together and use <div>s.