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!)
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