给力的jQuery响应式表格插件 - FooTable

响应式设计是指页面可以自动适应用户的设备环境，可自动调整分辨率，今天要介绍的就是一个响应式的表格插件 - FooTable。

FooTable 是一个很给力的 jQuery 响应式表格插件，使用它可打造出自适应浏览器宽度的动态表格来。它的实现原理是当宽度变小时自动隐藏表格中的某些列，并以另一种形式呈现它们，即当它们隐藏时你只要点击每一行的第一格就可查看此部分数据。此插件的使用是非常简单的，扩展性也很强。

如何使用

首先在 HTML 页面头部中添加 jQuery 框架、 FooTable 插件，具体代码如下

<link href="footable-0.1.min.css" rel="stylesheet" />
<script src="jquery.1.8.2.min.js"></script>
<script src="footable-0.1.js"></script>

接下来添加表格，在需要动态变化的列上添加data属性，默认有两个选择phone(480)和tablet(1024)，这表示在小于这个宽度时此列会隐藏

<table class="footable">
    <thead>
        <tr>
            <th>Name</th>
            <th data-hide="phone,tablet">Phone</th>
            <th data-hide="phone,tablet">Email</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Bob Builder</td>
            <td>555-12345</td>
            <td>bob@home.com</td>
        </tr>
        <tr>
            <td>Tom Cruise</td>
            <td>555-99911</td>
            <td>cruise1@crazy.com</td>
        </tr>
    </tbody>
</table>

最后初始化就完成了

$('.footable').footable();