HTML table headers always visible at top of window

Question

Please refer to HTML table headers always visible at top of window when viewing a large table

the solution that Craig McQueen provided work great for IE7 which is what I need currently. However, I tested with different browser, when I scroll down, the header flicking/flashing. How can I fix it?

Answer 1

Check this fiddle: http://jsfiddle.net/raqJ2/2/

Tested it on FF, Chrome and IE7 and up. No jumpiness or flicker/flash. Check it out.

Basically involves moving the header row to a fixed position element, instead of manipulating its top every time.

UPDATE

Check this fiddle: http://jsfiddle.net/raqJ2/8/

Added a small timed animation to scroll the header left/right to the desired location 500 ms after scroll ends. Check it out. Hope it helps.