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?

please post code examples rather then to ask how to do it, we can help with specific code questions. additionally, there are plugins for this out there, have a google or two on that :) — Alex, Apr 09 '14 at 07:28
**[THIS](http://www.farinspace.com/jquery-scrollable-table-plugin/)** is what you look for — Batu.Khan, Apr 09 '14 at 07:30
This may help you.. [HTML table with fixed headers](http://stackoverflow.com/questions/673153/html-table-with-fixed-headers?rq=1) — Vitthal, Apr 09 '14 at 07:31

score 0 · Answer 1 · answered Apr 09 '14 at 07:35

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.

To set table headers fixed while scrolling

1 Answers1