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.
Image may be NSFW.
Clik here to view.
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)
Image may be NSFW.
Clik here to view.
$('#table1').ReStable();
EXAMPLE 2 - RESPONSIVE COLUMNS TABLE (WITHOUT ROW HEADERS)
Image may be NSFW.
Clik here to view.![restable-example-1]()
$('#table2').ReStable({
rowHeaders : false
});