CSS scrollable table with fixed header, but using the browser scrollbar, not overflow

[HACKER85]

this is what i've done. http://jsfiddle.net/FeHdS/5/as you can see, when you use the browser scrollbar the whole table goes behind the "mainwrapper" div. i would like to have my table with a fixed header. And i don't want to use overflow scroll. what i tried was to simply assign a fixed position to thead. \[code\]thead{ position: fixed;}\[/code\]but then, the first row of the table takes the header place. is there a way to do that only with CSS? if not, what would be the best solution?thanks =)