Skip to content
A really nice jQuery plugin to scroll the body of long tables so the table fits on a single screen vertically. MIT or LGPL. Mobile-friendly data tables.
JavaScript CSS
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.

jQuery Table Body Scroll

This jQuery plugin heavily modifies table bodies into slick vertical scrolling solutions. Ugly scrollbars are hidden out of sight, relying on visual indicators. Native keyboard, scroll wheel, and touch support.

Combined with TableCards, traditional tables can be displayed on all devices in a neat, compact format.


<link rel="stylesheet" href="jquery.tablebodyscroll.css" type="text/css" media="all" />
<script type="text/javascript" src="jquery.tablebodyscroll.js"></script>
<script type="text/javascript">
$(function() {

	// Some optional custom event handlers.
	$('#mytable').TableBodyScroll(options).on('table:columnschanged', function() {
	}).on('table:datachanged', function() {
	}).on('tablebodyscroll:sizechanged', function() {

	// A custom resize/visibility event handler ('child:visibility' is a custom FlexForms Extras handler emitted by an Accordion callback).
	var resizefunc = function() {
		var obj = $('#mytable');

		if (!obj.length)  $(window).off('resize', resizefunc).off('child:visibility', resizefunc);
		else  obj.trigger('tablebodyscroll:resize');

	$(window).resize(resizefunc).on('child:visibility', resizefunc);

There are several live examples under "Add Entry" in the Admin Pack Demo.


The following options may be passed to TableBodyScroll:

  • height - An integer containing the height (Default is 60).
  • heightunit - A string containing one of the standard CSS units of measurement (Default is '%').
  • percentelem - An object to reference for the height measurement when heightunit is '%' (Default is window).
  • postinit - A callback function to run after each TableCards initialization is run (Default is null).

To destroy the instance and restore the table to its initial state, simply call: $('#mytable').TableBodyScroll('destroy');


The following custom events may be listened for:

  • tablebodyscroll:sizechanged - Notifies after resizing the table's most immediate parent.

The following custom events may be manually triggered:

  • tablebodyscroll:resize - Notifies TableBodyScroll that the table has been resized.
  • tablebodyscroll:columnschanged - Notifies TableBodyScroll that the table columns have changed and to rebuild any headers and footers.
You can’t perform that action at this time.