A lightweight jQuery plugin that enables HTML table markup to become responsive. It provides a clean list view via devices with small screens, then returns to the traditional view for larger screens. It can work for multiple tables on a single page, as well as with tables that contain various combinations of merged cells. It uses CSS for the rendering and is easily customized.
npm install jquery-responsive-tables --save
- The plugin requires jQuery 1.11 or above.
- Include the jquery.responsive-tables.js and the responsive-tables.css in your project. The CSS properties can be overridden to meet your needs.
- Invoke the plugin within your custom scripts file:
- Ensure that tables are marked up semantically using the <thead></thead> and <tbody></tbody> tags:
Within the responsive-tables.css style sheet, modifying the values of the 'top' and 'left' properties will change the perceived table heading padding at the "mobile" view. This will enable consitancy between the table heading and table data padding:
Within the responsive-tables.css style sheet, change the media query breakpoint as needed:
When changing the media query breakpoint within the responsive-tables.css style sheet, as described above, ensure that a matching value is passed from the plugin invocation:
Ryan Wells: ryanwells.com
Licensed under MIT. Enjoy.