How to make use of it:

1. Download 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.

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

const defaultTarget = "th";

4. Override the default CSS class of the sticky table header.

const defaultCss = {
      position: "sticky",
      top: 0,
      background: "#222",
      color: "#fff"
};

See Demo And Download