Make Long Table Scrollable - jQuery tableBodyScroll.js

A touch-friendly jQuery Scrollable Table plugin that provides better readability and saves screen space when presenting a long HTML table on your cross-device web app.

The plugin shrinks your long HTML table to a specific height (60% of viewport height by default), replaces the native browser scrollbar with a visual indicator, and therefore users can scroll through your HTML table via keyboard arrows, mouse wheel, and touch swipe events.

How to use it:

1. Link to jQuery JavaScript library and the tableBodyScroll.js plugin's files.

<link rel="stylesheet" href="/path/to/jquery.tablebodyscroll.css" />
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/jquery.tablebodyscroll.js"></script>

2. Just attach the plugin to your HTML table and done.

$(function(){
  $('table').TableBodyScroll();
});

3. Specify the max height of the table.

$('table').TableBodyScroll({

  // 60%
  'height' : 60,

  // height unit
  'heightunit' : '%',

  // relative to the window
  'percentelem' : window
  
});

4. Trigger a function on init.

$('table').TableBodyScroll({

  'postinit': function(){
    // do something
  }

});

---

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