Skip to content
Responsive tables to list jQuery plugin
Branch: master
Clone or download
Latest commit 869231d Jul 23, 2015
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
demo Latest fixes before merging to master Jun 25, 2015
.gitignore
README.md Update README.md Jul 23, 2015
bower.json
gulpfile.js
jquery.restable.css Latest fixes before merging to master Jun 25, 2015
jquery.restable.js
jquery.restable.min.css
jquery.restable.min.js Add keepHtml condition if rowHeaders is true Jun 11, 2015
package.json Multiple enhancement and fixes Oct 21, 2014

README.md

jQuery ReStable 0.1.2

jQuery ReStable is a very simple and lightweight (~1Kb) jQuery plugin that make tables responsive making them collapse into ul lists.You can find some examples in the included demo or here.

To use it you just have to include jQuery and a copy of the plugin in your head or footer:

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="jquery.restable.min.js"></script>
<link rel="stylesheet" href="jquery.restable.min.css">

Let's say this is your table:

<table class="mytable">
    <thead>
        <tr>
            <td>Period</td>
            <td>Full Board</td>
            <td>Half Board</td>
            <td>Bed and Breakfast</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>01/10/12 - 02/10/12</td>
            <td>20 €</td>
            <td>30 €</td>
            <td>40 €</td>
        </tr>
        <tr>
            <td>03/10/12 - 04/10/12</td>
           <td>40 €</td>
            <td>50 €</td>
            <td>60 €</td>
        </tr>
        <tr>
            <td>05/10/12 - 06/10/12</td>
            <td>70 €</td>
            <td>80 €</td>
            <td>90 €</td>
        </tr>
    </tbody>
</table>

Now the only thing to do is to trigger the action with:

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

This will target automatically all the tables in the page but you can, off course, target one or more elements with:

$(document).ready(function () {
    $('.mytable').ReStable();
});

If you need more control here's the plugin settings:

$('.mytable').ReStable({
    rowHeaders: true, // Table has row headers?
    maxWidth: 480, // Size to which the table become responsive
    keepHtml: false // Keep the html content of cells
});

Credits and contacts

ReStable has been made by me. You can contact me at micc83@gmail.com or twitter for any issue or feature request.

You can’t perform that action at this time.