jQuery plugin for tables with fixed headers

View the Project on GitHub markmalek/Fixed-Header-Table

Why use this plugin?

FixedHeaderTable in its simplest form displays a fixed header for any valid table mark-up. This is an active jQuery plugin project so expect new features and improvements to be released. Some options include a fixed footer using the tables tfoot element or cloning the thead as a fixed footer. This plugin is meant to be lightweight, easy to use and performant.

How it works.

Using this plugin is very simple. All that is needed is valid table mark-up.


Fixed Header Table will do the rest for you. Both fixed width columns and non-fixed width columns are supported. Current browser support includes Internet explorer 6-9, Chrome, Firefox, and Safari.


Adding an optional themeClass will add the class to the plugin wrapper. This will allow for easy theming for the table.

Demo time!

Committer Commit Date Commit Message Details
Committer Commit Date Commit Message Details




Remove the fixedHeaderTable functionality completely. This will return the element back to its pre-init state. Code example:



Hide the table. Code example:



Show the table. Code example:




This event is triggered when .fixedHeaderTable is created. Code example:

  create: function() { ... }



The specified class name will be added to odd rows (tr) for theming. Code example:

$('selector').fixedHeaderTable({ altClass: 'className' });


When autoShow is false the table will be hidden automatically when fixedHeaderTable is called. The table will remain hidden until .fixedHeaderTable('show') is called on it. Code example:

$('selector').fixedHeaderTable({ autoShow: true });


When cloneHeadToFoot is true the table header will be cloned and used as the table footer. Code example:

$('selector').fixedHeaderTable({ cloneHeadToFoot: true });

fixedColumn version 1.3 only

When fixedColumn is true the first column will be fixed if the table scrolls horizontally. Code example:

$('selector').fixedHeaderTable({ fixedColumn: true });


When footer is true the TFOOT of the table will be used as a fixed footer. A TFOOT must be included in the table mark-up. Code example:

$('selector').fixedHeaderTable({ footer: true });


When height is set the table thead, tbody, and optional tfoot will be equal to the height value. Height is in pixels. Code example:

$('selector').fixedHeaderTable({ height: 500 });


When width is set the table width will be equal to the width value. Width is in pixels. Code example:

$('selector').fixedHeaderTable({ width: 500 });


The specified class name will be added to the table for theming. Code example:

$('selector').fixedHeaderTable({ themeClass: 'className' });