I wrote up a little JavaScript plugin over the weekend that has a <table>
's header scroll with the page. What sparked this little endeavour was a question asking for this functionality on Stack Overflow. Since it was fun answering the question, I thought I'd go ahead and make a more general plugin type solution that worked for multiple tables.
Similar to my sortable-table.js plugin, simply add the sticky-header
class to a <table>
and the functionality will be enabled.
<table class="sticky-header"> .... </table>
I've tested it in all the latest browsers and seems to work fine; Chrome, Firefox, Safari, Opera, IE10, IE9 and IE8. No IE7 because it doesn't implement querySelectorAll
, the code would be a bit more icky if I used some other method, and you know, it's IE7.
Here is a demonstration on GitHub HTML preview, and be sure to check it out on GitHub!