Fix Headers And Columns In Html Table - jQuery stickyTable

stickyTable is a lightweight jQuery plugin to make headers and columns sticky in a scrollable HTML table.

The plugin also allows you to limit the height of your table to the height of its parent element. Defaults to false which means that the plugin sticks the table header to the top as you scroll down the whole page.

How to use it:

1. Install & Download and load the jQuery stickyTable plugin's files from the dist folder.

# NPM
$ npm install jquery-stickytable  --save

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="/dist/jquery-stickytable.js"></script>
<link rel="stylesheet" href="/dist/jquery-stickytable.css">

2. Or from the CDN.

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://unpkg.com/[email protected]/dist/jquery-stickytable.js"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/jquery-stickytable.css">

3. Attach the plugin to the HTML table and done. To create sticky headers, your HTML table must have the thead element:

<table id="myTable">
  <thead>
  <tr>
    <th>Column 1</th>
    <th>Column 2</th>
    <th>Column 3</th>
    ...
  </tr>
  </thead>
  <tbody>
    ...
  </tbody>
</table>

$(function(){
  $('#myTable').stickyTable();
});

4. To create sticky columns, the <tbody> must have <th> elements.

<tbody>
  <tr>
    <th>Column 1</th>
    <td>...</td>
  </tr>
  ...
</tbody>

5. Determine whether to table classes and events on headers and columns.

$(function(){
  $('#myTable').stickyTable({
    copyTableClass: true,
    copyEvents: false
  });
});

6. Determine whether to make the html table vertically scrollable (limit the height of the table to the height of its parent container).

$(function(){
  $('#myTable').stickyTable({
    overflowy: true
  });
});

---

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