declan bright

Responsive Table jQuery Plugin

Responsive Table

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

Design Considerations

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

Downloads

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.

Related Articles

View Comments