ReStable是一款轻量级的jQuery响应式表格插件

ReStable是一款轻量级的jQuery响应式表格插件。该响应式表格插件可以在指定的响应式断点时，将表格结构切换为无序列表结构，以适应在小屏幕设备中显示表格数据。

JavaScript 表格/网格

访问GitHub主页

共183Star

详细介绍

jQuery ReStable 0.1.2

jQuery ReStable is a very simple and lightweight (~1Kb) jQuery plugin that make tables responsive making them collapse into ul lists.You can find some examples in the included demo or here.

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>
<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:

$(document).ready(function () {
    $.ReStable();
});

This will target automatically all the tables in the page but you can, off course, target one or more elements with:

$(document).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
});

Credits and contacts

ReStable has been made by me. You can contact me at micc83@gmail.com or twitter for any issue or feature request.

推荐源码