jQuery Plugin For Sticky Table Cells - stickyTable.js

stickyTable.js is a lightweight jQuery plugin that makes the columns or rows of your long html table sticky when scrolling.

Heavily based on CSS 'relative' position property. jQuery is used only to toggle the corresponding CSS classes on scroll event.

How to use it:

1. First you need to include jQuery library and the jQuery stickyTable plugin's files on the html page.

<link rel="stylesheet" href="jquery.stickytable.min.css">
<script src="//code.jquery.com/jquery.min.js"></script>
<script src="jquery.stickytable.min.js"></script>

2. Then wrap your html table into a container with the CSS classes of 'sticky-table & sticky-headers' and then specify the table cells which should be sticky using the 'sticky-cell' class as shown below:

<div class="sticky-table sticky-headers sticky-ltr-cells">
  <table class="table table-striped">
    <thead>
      <tr class="sticky-row">
        <th class="sticky-cell">Ford</th>
        <th>Escort</th>
        <th>Blue</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="sticky-cell">Ford</td>
        <td>Escort</td>
        <td>Blue</td>
      </tr>
      <tr>
        <td class="sticky-cell">Ford</td>
        <td>Escort</td>
        <td>Blue</td>
      </tr>
    </tbody>
  </table>
</div>

3. That's it. To support RTL table, just add replace the CSS class 'sticky-ltr-cells' with 'sticky-rtl-cells'.

<div class="sticky-table sticky-headers sticky-rtl-cells">
  <table class="table table-striped">
    <thead>
      <tr class="sticky-row">
        <th class="sticky-cell">Ford</th>
        <th>Escort</th>
        <th>Blue</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="sticky-cell">Ford</td>
        <td>Escort</td>
        <td>Blue</td>
      </tr>
      <tr>
        <td class="sticky-cell">Ford</td>
        <td>Escort</td>
        <td>Blue</td>
      </tr>
    </tbody>
  </table>
</div>

Changelog:

2020-02-16

• Fix header and footer offset for multiple sticky tables with position sticky support

2020-01-17

• Support multiple sticky headers or cells side by side. 

2018-09-05

• Use css position:sticky property if supported

2018-06-28

• Feat: add support to footers and opposite columns

2018-02-03

• Fix: Call scroll events upon triggering stickyTable Event

2018-01-11

• Fix: Disable smooth scrolling on sticky-table for mouse wheel event on IE11

2018-01-10

• Fix: prevent sticky from having a padding

---

This awesome jQuery plugin is developed by armaaar. For more Advanced Usages, please check the demo page or visit the official website.