jQuery ReStable – Making Tables Responsive

Recently, I have been working on a website that included a lot of tables in the content. My main issue with the tables was that I wanted them to look beautiful on every device. As you know tables can be a real pain in the neck when it comes to Responsive design. I have researched what are the solutions  for achieving a great-looking tables and while researching I found jQuery ReStable plugin which makes the tables responsive easily. I liked also the fact that it is a very simple and lightweight plugin and the trick with it is that converts the tables into ul lists.

jQuery ReStable

Here is how it works: 

Include the jQuery and the ReStable plugin into your <head></head> or in the 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 imagine that this is your table

<table>
<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>

To make it work you need to trigger it by include this simple lines (this code will be applied to all the tables)

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

To make it work only for certain tables:

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

Some more control on you tables:

Don’t struggle alone with projects

Join the creative community of UX, graphic, web designers and developers to get help with any design or dev project.

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

EXAMPLE 1 – RESPONSIVE PRICELIST TABLE (WITH ROW HEADERS)

restable-example-1

 

$('#table1').ReStable();

EXAMPLE 2 - RESPONSIVE COLUMNS TABLE (WITHOUT ROW HEADERS)

restable-example-1
$('#table2').ReStable({
    rowHeaders : false
});

Download ReStable

 


You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *