Lightweight jQuery Responsive Table Plugin - ReStable

ReStable is a jQuery menu plugin designed for responsive website that automatically converts a common Html Table into an mobile-friendly UL list when your visitor reaches the breakpoint.

See also:

• Lightweight jQuery Responsive Dropdown Menu Plugin - ReSmenu

How to use it:

1. Include jquery.restable.css in the head section of your web page.

<link rel="stylesheet" href="jquery.restable.css">

2. Create the html for a responsive table.

<table id="demo">
<thead>
<tr>
<th>Period</th>
<th>Full Board</th>
<th>Half Board</th>
<th>Bed and Breakfast</th>
</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>

3. Include jQuery library and jQuery ReStable Plugin in the page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="../jquery.restable.js"></script>

4. Initialize the plugin with options.

<script>
$(window).ready(function () {
$('#demo').ReStable({
rowHeaders: true,
maxWidth: 480,
keepHtml: false
});
});
</script>

Change log:

2015-06-26

• fixed bugs.

---

This awesome jQuery plugin is developed by micc83. For more Advanced Usages, please check the demo page or visit the official website.