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