Flexible Lock Table Head/Scroll Table CSS?

I've come up with a way (at least in IE7 and Firefox 2 and 3) to create a table that lets you scroll the body contents while the table header row remains fixed in place.

It's mostly a CSS solution, but it does use the IE CSS expression operator and uses some DOM properties to assign some IE heights and widths. The other CSS solutions I've seen to this problem all tend to be pretty inflexible and hard to implement in the real world for tables of varying sizes. They require that you to hard code your table widths and heights in multiple locations in the CSS and involve the use of more than just one class name assignment.

I wanted a solution that could handle tables of different sizes on the same page. Something that allowed you to assign just one class and allowed the you to specify the height in the actual table that you wanted to lock the headings for.

I tried to keep the HTML table mark-up as clean as possible. All you need do is to simply assign a single CSS class name to a DIV that surrounds the table then assign a height you want the table to be as an embedded style. That's it.

[Code]...