query-table-fixed-head

jQuery Plug-In: Table fixed head

This jQuery plug-in makes the <thead> HTML element fixed on the top of a table if you scroll down.

Installation

Include script after the jQuery library (unless you are packaging scripts somehow else):

<script src="jquery.michiweber.table-head-fixed.min.js"></script>

Add the class table-fixed-head to your table you want the <thead> to be fixed on scrolling.

Manual use

If you don't want to make use of the automated system you can also call the plugin directly from any <script>:

$('table').tfh([options]);

Options

Option	Default value	Default automated value	Description
trigger	0	0	The top value on scrolling when the <thead> gets fixed
top	0	top position of the table	The defaultop value on scrolling when the <thead> gets fixed

Set options via attribute

You can use the plug-in without writing a line of javascript code. To set the option values the following attributes can be used to overwrite the default values:

Option	Attribute
trigger	data-table-fixed-head-trigger
top	data-table-fixed-head-top

Example:

<table class="table-fixed-head" data-table-fixed-head-trigger="20" data-table-fixed-head-top="50">

Individualization

If the <thead> tag gets fixed a class named fixed gets added to the table.

table.table-fixed-head.fixed {
    ...
}