Fix Table Header To The Top Of The Page - fixedTableHeader

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.