jQuery ReStable v0.1.1
- -jQuery ReStable is a very simple and lightweight (~1Kb) jQuery plugin that make tables responsive making them collapse into ul lists.
- - Download it on GitHub - -To 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> + + + + ++ ++ +- - +});jQuery ReStable v0.1.2
+ +jQuery ReStable is a very simple and lightweight (~1Kb) jQuery plugin that make tables + responsive making them collapse into ul lists.
+ + Download it on GitHub + +To use it you just have to include jQuery and a copy of the plugin in your head or footer:
++<link rel="stylesheet" href="jquery.restable.min.css"> -<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:
+Let's say this is your table:
-<table class="mytable"> ++ +- -<table class="mytable"> <thead> <tr> <td>Period</td> @@ -66,163 +70,172 @@jQuery ReStable v0.1.1
<td>90 €</td> </tr> </tbody> -</table>Now the only thing to do is to trigger the action with:
+</table>Now the only thing to do is to trigger the action with:
-$(window).ready(function () { +-+});$(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:
+This will target automatically all the tables in the page but you can, off course, target one or more elements + with:
-$(window).ready(function () { +-$(window).ready(function () { $('.mytable').ReStable(); -});If you need more control here's the plugin settings:
-$('.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, only work with rowHeaders = false -});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) - -- -
+ keepHtml: false // Keep the html content of cells +}); + +- - - -Carbon -Hydrogen -Nitrogen -Oxygen -- -10 -15 -1 -0 -- -8 -11 -1 -2 -- -10 -15 -1 -1 -- -12 -17 -1 -1 -- - -14 -19 -1 -2 -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 € ++ + Example B - Responsive Columns Table (without row headers) + +$('#table1').ReStable();+ +
-+ + + +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({ +- - Example C - Responsive Columns Table with html support (without row headers) - -$('#table2').ReStable({ rowHeaders : false -});- -
- -- - - -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.
--
-- Element 1
-- Element 2
-- Element 3
-$('#table3').ReStable({ +});+ + 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.
++
+- Element 1
+- Element 2
+- Element 3
+- -$('#table3').ReStable({ keepHtml : true, rowHeaders : false -});Credits and contacts
- -ReStable has been made by me. You can contact me at micc83@gmail.com or twitter for any issue or feauture request.
- - -
Credits and contacts
+ ++ ReStable has been made by me. + You can contact me at micc83@gmail.com + or twitter + for any issue or feauture request. +
+ + +