Accessible Sticky Table Header Plugin in Jquery

File Size:7.23 KB
Views Total:325
Last Update:July 21, 2019
Publish Date:December 1, 2017
Official Website:Go to website

Sticky Table Header jquery plugin for use table header sticky by cloning the thead element and inserting it into a new table header fixed position property. some time long list of table With support for screen reader and multiple fixed table headers on one page.

How to use it:

  1.  Add  JavaScript file:
    <script src="//"></script>
    <script src="jquery.stickyTableHeader.js"></script>
  2.  Wrap the html table into a DIV container:
    <div class="table-container">
      <table class="table">
            <th colspan="2">Some data</th>
            <th colspan="2">Some data</th>
            <th colspan="2">Some data</th>
            <td>First row</td>
            <td>Aliquam sed</td>
            <td>Donec lobortis pharetra</td>
            <td>Proin pretium</td>
            <td>Duis porttitor dui elit</td>
            <td>Aliquam placerat ante</td>
  3.  Initialize the plugin with Options:
      outsideViewportOnly: true,
      scrollThrottle: 50,
      css: {
        header: "StickyTableHeader",
        scrolling: "is-scrolling",
        active: "is-stickyTableHeaderActive"
      zIndex: 2

    Done 🙂