jQuery ReStable is a very simple and lightweight (~1Kb) jQuery plugin that make tables responsive making them collapse into ul lists.
Download it on GitHubTo 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:
$(window).ready(function () { $.ReStable(); });
This will target automatically all the tables in the page but you can, off course, target one or more elements with:
$(window).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 });
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 });
ReStable has been made by me. You can contact me at micc83@gmail.com or twitter for any issue or feauture request.