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 { ... }
