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
keepHtml: false // Keep the html content of cells
});
Some examples
Example A - Responsive Pricelist Table (with row headers)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
});
Example C - Responsive Columns Table with html support (without row headers)
Avatar | Username | Description | |
---|---|---|---|
Pinco | pinco@example.it | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla molestie vulputate lectus, eu aliquam erat cursus ac. Etiam finibus pellentesque turpis vitae lacinia. Suspendisse lorem nibh, gravida aliquam arcu in, iaculis consectetur nisl. Pellentesque eu mattis sapien. |
|
Pallino | pallino@example.it | Lorem ipsum dolor sit amet, consectetur adipiscing elit. |
|
Asdrubale | asdrubale@example.it |
Nulla molestie vulputate lectus, eu aliquam erat cursus ac. Etiam finibus pellentesque turpis vitae lacinia.
|
$('#table3').ReStable({
keepHtml : true,
rowHeaders : false
});