Here's what I'd like to do and I'm wondering if any of you CSS experts can provide a solution (or tell me it's impossible).

Imagine a fixed height div with a table inside it. As the number of rows in the table increases, there comes a point when the div will add a scrollbar and you can scroll the table rows up and down within the div.

Simple enough, but when it scrolls, the header row disappears.

My challenge is to have the column headers visible at all times, so the rows scroll beneath the header row (Just like spreadsheet rows do when you freeze the header pane).

Has anyone successfully managed to do this, of have any ideas on effective ways to achieve it without resorting to Javascript?