TableHeadFixer

About

TableHeadFixer is a simple jQuery plugin for fixing HTML table header, footer and columns.
This plugin will only add elements' events and css attributes necessary to fix table header, footer and columns. You can customize styles of your table, as this plugin will not influence any styles of your table (width, height, background, font color, etc...)

Dependiences (Important!)

• jQuery

Get Starting

Before you can use TableHeadFixer plugin, it is required to include jQuery on your website.
To use TableHeadFixer just include the plugin and call $(element).tableHeadFixer([param]) function after the page renders.
The table must be wrapped with a div element with all size styles set.

Example:

Fix Table Header

    // get your table with jQuery selector
    $("#fixTable").tableHeadFixer();

Fix First Left Column

By default, the function .tableHeadFixer() fixes only table header. If you need to fix only footer or columns, it is necessary to disable header fix by parameter.

	$("#fixTable").tableHeadFixer({'left' : 1, 'head' : false});

Fix Two Left Columns

	$("#fixTable").tableHeadFixer({'left' : 2, 'head' : false});

Fix Table Header and First Right Column

	$("#fixTable").tableHeadFixer({'right' : 1});

Fix Table Header and Footer

	$("#fixTable").tableHeadFixer({'foot' : true});

If you need to set fixed cells z-index parameter to resolve conflits between jQuery plugins

	$("#fixTable").tableHeadFixer({'z-index' : 50});

Fix Multiple Rows in Header or Footer

Fixing multiple rows in header or footer is as easy as adding new tr to either of them, all header's and footer's table rows will be fixed.

More Demos

More demos are available inside examples directory.

Parameters

attribute	values	default
head	true/false	true
foot	true/false	false
left	1,2,3,4,etc	0
right	1,2,3,4,etc	0
z-index	10,50,999,etc	0

Note

To be able to fix table header, footer and columns, it is important to have the table contained in a div, with explicitely set height (for fixing header or footer) and width (for fixing columns) attributes/css styles. This is very important, since this plugin depends on having the area for the table limited.

If fixed cells' border is important for you

If fixed cells' border is important for you, it is necessary to set table cells' styles to border-collapse: separate, because with border-collapse: collapse style the cell borders cannot separate and maintain the position of fixed cells.

Update

• Fixed problems with some function is not defined issue in old Firefox.

Licence

MIT