Keep table headers on screen as user scrolls

Question

I have an HTML page that contains a table. The table headers get eventually scrolled off the top of the screen, but I would like the headers to stay visible at the top.

I want to use a method like alaskaair.com's "Fares Selected" widget. Their little Fares widget stays visible as you scroll the page: Screenshot of alaskaair.com widget.

Note that in my case it would look more like this: Simple Mockup

Answer 1

I use xTableHeaderFixed to freeze my headers:

http://cross-browser.com/x/lib/view.php?s=xTableHeaderFixed

Answer 2

I was in a similar situation recently (creating an inbox-style display for notifications), and after some googling, I came across these:

1. http://www.imaputz.com/cssStuff/bigFourVersion.html
2. http://www.imaputz.com/cssStuff/bulletVersion.html

I'm presently using (1) and I haven't encountered any issues with it so far. You can follow the discussion of the solution here.

EDIT
I just re-read your question, and I guess this isn't exactly what you were looking for. Still, maybe it'll be useful to someone else.