To set table headers fixed while scrolling

Question

In explorer I am able to keep the thead part of my table fixed while scrolling using css expressions. Below is the css code snippet that does it : .standardTable thead tr { position: relative; top: expression(offsetParent.scrollTop); }

But this same doesn't work in chrome as expressions are deprecated for chrome. I need help in changing the "top" property of the above class using javascript or jquery. How to do it ?

Can it be done?

Answer 1

Sticky headers on tables are a very complex problem. WebKit has included a new CSS property position:sticky but it is only supported by less than 6 % of all user.

You can make a sticky header with jquery. Basically you just change the position of the header to fix if the user scrolls down. But because of many differed implementation of the table it is a mess. If you want to design it from scratch, here is a good tutorial. Otherwise you find a lot of good jQuery plugins online .