Stick Table Element To Top/Bottom/Left/Right - jQuery sticky.js

Stick Table Element To Top/Bottom/Left/Right - jQuery sticky.js

A simple-to-use jQuery sticky table plugin that sticks any table elements (thead, tbody, tfoot, th, tr, td, etc) to the top, bottom, left and/or right in a large HTML table.

1. Add jQuery JavaScript library and the jQuery sticky.js plugin to the html page.

<link rel="stylesheet" href="stickytable.css">
<script src="" 
<script src="sticky.js"></script>

2. Initialize the plugin on the HTML table and we're ready to go.


3. Specify the table elements to be sticky using the data-sticky-POSITION attributes:

<table class="example" 
       data-sticky-left="tr td:first-child" 
       data-sticky-right="tr td:last-child"

4. You can also specify the table elements to be sticky during init as follows:

    top: "tr:first-child",
    left: "tr td:first-child",
    right: "tr:last-child",
    bottom: "tr td:last-child"

5. Event handlers.

$('table').on('sticky-table-susses', function() {
$('table').on('sticky-table-start', function() {
$('table').on('sticky-table-removed', function() {

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

  • Publication date: 26.02.2019
  • Source