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:

$('.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)

Related post:  10 Inspiring Code Experiments on CodePen

restable-example-1

 

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

EXAMPLE 2 - RESPONSIVE COLUMNS TABLE (WITHOUT ROW HEADERS)

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

Download ReStable

 

Divi WordPress Theme

You may also like...

Leave a Reply

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

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close