Responsive Table jQuery Plugin

About the Plugin

The Responsive Table jQuery Plugin is a lightweight plugin which adds responsive behaviour to a HTML table. When a table overflows its container on smaller screens, the plugin will hold the first column (or the configured number of columns) in place and the remaining columns become horizontally scrollable. This is a good pattern if you don't want the structure or appearance of a HTML table to be altered dramatically when the viewport width is reduced, such as when the orientation of a mobile device is changed from landscape to portrait.

Demos

Column A	Column B	Column C	Column D	Column E
Cell A1	Cell B1	Cell C1	Cell D1	Cell E1
Cell A2	Cell B2	Cell C2	Cell D2	Cell E2
Cell A3	Cell B3	Cell C3	Cell D3	Cell E3

<< wider >>

Demos showing various configurations

Design Considerations

There are other scripts and plugins which add responsive behaviour to a HTML table but this plugin has several advantages:

This plugin does not require any CSS to function (although you may need to add white-space: nowrap; if your content contains white space).
You do not have to predefine any adaptive breakpoints, the plugin automatically detects when the table overflows its container.
You can specify the number of columns which will remain static when the table overflows its container.
The user is notified when the table contents become horizontally scrollable.
The plugin does not clone the table in the DOM.

Downloads

Responsive Table Plugin - minimised (2.5 KB)
Responsive Table Plugin (8 KB)

Using the Plugin

As this is a jQuery plugin you must have the jQuery script included in your page, you can download it or link directly to it in a CDN, see the jQuery download page for more information on getting this setup.
Download the responsive table plugin script and add it to your page:

<script src="jquery.responsivetable.min.js"></script>

Call the plugin on a selector within the document ready function:

$(document).ready(function(){
	$('table').responsiveTable();
});

Here is an example with parameters:

$(document).ready(function(){
	$('table').responsiveTable({
		staticColumns: 2, 
		scrollRight: true, 
		scrollHintEnabled: true, 
		scrollHintDuration: 2000
	});
});

Once everything has been setup you should have a responsive table, to see the plugin in action, narrow the width of your browser window until the width of your table exceeds the width of its container.

View Comments