A couple of days ago I wrote a lengthy tutorial about creating scrolling tables with fixed headers. I thought I could take the exercise a step further by creating a jQuery plugin to keep the code contained in one location and allow users to call the "chromatable()" method on any table, or many tables on the same page.

How to use?

To make the plugin work, you'll need to add the following to the head of your HTML:

	<link href="css/style.css" rel="stylesheet" type="text/css" />
	<script type="text/javascript" src="jquery.chromatable.js"></script>

Then, call the chromatable() method on any table within your code, for example:

	$(document).ready(function(){
		$("#yourTableID").chromatable();
	});

You can modify the table's height and width by adding the following lines:

	$("#yourTableID2").chromatable({
 
		width: "900px",
		height: "400px",
		scrolling: "yes"
 
	});	

For the first release of this plugin, the table width is limited to being calculated as a pixel dimension, percentage values will not work. Version 1.2.0 supports table widths set to a fixed pixel dimension, auto, or 100%. You may see unexpected formatting results if you specify the table too narrow to accommodate your columns.

In the download package, you will see an example.html file of how to setup the chromatable properly, in most cases it should work perfectly out of the box. That's it, you should be ready to rock with your new Chromatables! Please feel free to send me your feedback or questions regarding implementation. This is one of my first plugins I've written for public use so I'm sure folks might have some insight on how to improve upon the idea for future releases.

Download

Latest source

Known problems

Some peeps have reported issues in IE6 and Opera. Although I don't plan to support IE6 in the near future, I will be looking into a future release to fix problems in Opera.