Skip to content
Switch branches/tags

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time

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.

Donate Discord


<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.


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.



No releases published


No packages published