StickyHead: a jQuery plugin for sticking table head Download Plugin (1.5 kb) View Source


HTML table has a problem, there is no easy way to fix the header. A quick google search brings up many questions on stackoverflow and many projects and half baked solutions attempting to fix this. Main problem in all the solution is that each table need to have fixed height so that it can have a scrollbar. So that is now two problems, height restriction + ugly scrollbars in each table.

In my case I had many report pages where there are several tables, I don't want to add scrollbar to each of them, instead a cleaner look would be to use main browser vertical-scrollbar for scrolling, but as table header goes out of view, user have no way to know what is the header for a given column, here comes the StickyHead which pins/sticks the head of the table to top of the page as user scrolls, that is best explained via this demo.
Tested on Chrome, Firefox, IE7/IE8/IE9.

Scroll the page and see how table head sticks

To use stickyhead is very simple e.g.
    $(function() {
        $('.table').stickyhead({'top_bar':'#top_bar'})
    });
    
This make the head of all the tables on this page sticky, keep scrolling to see it in action, on tables below.
Various options taken by stickyhead
Option Default Description Example
top_bar null css selector for the top fixed bar on the page e.g. see this page, when table head goes under top black bar, we pin/stick the head. $('.table').stickyhead({'top_bar':'#top_bar'})
top_bar_height null If you know the height of top bar you can just pass that instead of us calculating it. $('.table').stickyhead({'top_bar_height':40})
css {'background-color':'#ffffff', 'border-bottom':'1px solid #cccccc'} If you want to modify css of stickyhead, you can pass that e.g. if table head has no background color, rows will show thru it when scrolled, so we set a solid background and a bottom border.
$('.table').stickyhead({
  'css':{
      'background-color':'#ffffff', 
      'border-bottom':'1px solid #cccccc'
  }
})
            
with_data_and_events true If you know copy the events and data associated with table head to stickyhead, pass true else false $('.table').stickyhead({'with_data_and_events':true})
Two dynamically generated long tables side by side
Column1 Column2 Column3
Another Col1 Another Col2 Another Col3