jquery-responsive-tables

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.

Demo

Usage

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:

$(document).ready(function() {
    $.responsiveTables();
});

• Ensure that tables are marked up semantically using the <thead> (optional) and <tbody> (required) tags:

<table>
    <caption>
        Example
    </caption>
    <!--optional-->
    <thead>
        <tr>
            <th>Heading</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Sample</td>
            ...
        </tr>
    </tbody>
</table>

Customizations

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:

.jrt td:before {
    /* top/left values mimics padding */
    top: 8px;/* mimics padding top */
    left: 6px;/* mimics padding left */

Within the responsive-tables.css style sheet, change the media query breakpoint as needed:

@media only screen and (max-width: 768px);

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:

$.responsiveTables('768px');

Author

Ryan Wells: ryanwells.com

License

Licensed under MIT. Enjoy.