jquery-table-fixed-header

A jQuery plugin to make table header fixed on the top when scrolling down.

Usage no npm install needed!

<script type="module">
  import jqueryTableFixedHeader from 'https://cdn.skypack.dev/jquery-table-fixed-header';
</script>

README

jQuery table fixed header

Compatibility

Modern browsers that follows standards and IE7+

Usage

$("table").tableFixedHeader();

$("table").tableFixedHeader({
    headerRows: 2		//if your header have more than 1 row
    /*, other options */
});

<!--
Table with `fixed-header` class will enable fixed header automatically.
Options can be specified by `data-` attribute`.
-->
<table class="fixed-header" data-header-rows="2">
    ......
</table>

Html Structure

The fixed header element will keep the same table group container as original table(such as thead or tbody).

The fixed header is just cloned from the original table. It follows after the original one to get CSS stylesheet rules applied as much as possible. Inline styles will also be cloned. However, the id attribute will be removed from cloned elements to make sure the id is unique in the page. If you apply your CSS by id, that would not work for cloned elements.

Options

headerRows
The number of leading rows from table that will be fixed.

fixedClass
CSS class for cloned fixed table.

fixedTop
Top offset of the fixed header. Can be a number (of pixels) or a function that returns the value. Useful if you already have a fixed page header.

scrollContainer
Determine the parent scroll container. Fixed header will locate based on that container.