8

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:

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

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
});

Example C – Responsive Columns Table with html support (without row headers)

Avatar Username Email Description
Pinco pinco@example.it

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla molestie vulputate
lectus, eu aliquam erat cursus ac. Etiam finibus pellentesque turpis vitae lacinia. Suspendisse
lorem nibh, gravida aliquam arcu in, iaculis consectetur nisl. Pellentesque eu mattis sapien.

Pallino pallino@example.it

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Asdrubale asdrubale@example.it

Nulla molestie vulputate lectus, eu aliquam erat cursus ac. Etiam finibus pellentesque turpis vitae
lacinia.

  • Element 1
  • Element 2
  • Element 3
$('#table3').ReStable({
    keepHtml : true,
    rowHeaders : false
});