Scrollable Table with jQuery

h2. aka jQuery Fixed Table Headers.

I created this jQuery plugin a little while back. Basically, it’s headers that don’t move while the table becomes scrollable.

Demo: jQuery scrollable table

Usage:

$(function(){
  $("#t1").scrollableTable();
  $("#t2").scrollableTable({type:"th"});
});

Only two things to note. First, the default is to make the table scrollable based on the thead tag rather than the th, but the latter is an option (see example above). Second, thing to note is that the table tag is surrounded by a div tag, which has a fixed height and overflow-y:scroll.

Eventually, I’ll go back and add those as options and dynamically create them rather than having to manually do it… but for now it works.

Email address

Sign Up