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.
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)
$('#table1').ReStable(); EXAMPLE 2 - RESPONSIVE COLUMNS TABLE (WITHOUT ROW HEADERS)
$('#table2').ReStable({ rowHeaders : false });