<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.