Fix Table Header To The Top Of The Page - fixedTableHeader
File Size: | 5.67 KB |
---|---|
Views Total: | 1733 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

A super tiny and blazing fast sticky table header plugin that makes the header of your large HTML table always stay visible when scrolling the page.
How to use it:
1. Download and place the jquery.fixedTableHeader.js
script after jQuery.
<script src="/path/to/cdn/jquery.slim.min.js"></script> <script src="/path/to/jquery.fixedTableHeader.js"></script>
2. Just attach the function fixedTableHeader
to your HTML table and the plugin will do the rest.
<table class="example"> <tr> <th>Names</th> <th>Email</th> <th>Phone</th> </tr> <tr> <td>Alexis</td> <td>[email protected]</td> <td>(028) 2386 7366</td> </tr> <tr> <td>Hayfa</td> <td>[email protected]</td> <td>(0191) 574 7393</td> </tr> ... </table>
jQuery(($) => { $(".example").fixedTableHeader(); })
3. Specify the selector of the table header to be sticky. Default: 'th'.
const defaultTarget = "th";
4. Override the default CSS class of the sticky table header when stuck.
const defaultCss = { position: "sticky", top: 0, background: "#222", color: "#fff" };
This awesome jQuery plugin is developed by kiyotd. For more Advanced Usages, please check the demo page or visit the official website.