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.
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.
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:
Call the plugin on a selector within the document ready function:
Here is an example with parameters:
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.