jQuery ReStable v0.1.1

jQuery ReStable is a very simple and lightweight (~1Kb) jQuery plugin that make tables responsive making them collapse into ul lists.

Download it on GitHub

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:

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

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

$(window).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
});

Some examples

Example A - Responsive Pricelist Table (with row headers)
Period Full Board Half Board Bed and Breakfast
01/10/12 - 02/10/12 20 € 30 € 40 €
03/10/12 - 04/10/12 40 € 50 € 60 €
05/10/12 - 06/10/12 70 € 80 € 90 €
$('#table1').ReStable();
Example B - Responsive Columns Table (without row headers)
Carbon Hydrogen Nitrogen Oxygen
10 15 1 0
8 11 1 2
10 15 1 1
12 17 1 1
14 19 1 2
$('#table2').ReStable({
    rowHeaders : false
});

Credits and contacts

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