Sticky headers
Whilst working on a work project, I needed to create a HTML table that would contain possibly hundreds of rows. The table was followed by a set of buttons that were required to remain on screen at all times (for a set resolution).
So I knew I needed to make the table scrollable, which isn’t exactly a hard task.
However, the top row of the table contained the column headers, which also needed to remain on screen at all times.
Achieving this is a very simple task in tools such as Microsoft Excel, but it wasn’t so straight forward for the web.
After playing around with several examples, all with varying degrees of success, I managed to piece it all together into a final version, which works on IE v6, v7 & v8, as well as Firefox v2 & v3 and even Opera!
(Oh, and it’s XHTML and CSS3 compliant too!)