Preamble

When displaying large amounts of data in a table, it can often be useful for the end user to have the column titles (the "thead" element as a whole in fact) always visible. This is particularly true if using DataTables with pagination disabled, or the display length is set to a high value.

The "FixedHeader" add-on for DataTables will ensure that your column titles will scroll with the page, showing at the top of the table at all times. Try the demo shown below - you might want to try resizing the window for full effect! Note also that the column titles remain clickable to perform sorting on the table.

Live example

Initialisation code

$(document).ready( function () {
	var oTable = $('#example').dataTable();
	new FixedHeader( oTable );
} );

Examples

• Basic demo with just the HeaderFixed
• FixedHeader without requiring DataTables
• Two tables with FixedHeaders on a single page
• A spreadsheet style layout with header and footer, left and right columns all fixed.
• Change the display order of the fixed elements (zIndex)

Empty paragraphs to force scrolling!...