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

本文参考：http://site518.net/demo/footable/demo.htm

响应式设计是指页面可以自动适应用户的设备环境，可自动调整分辨率，今天要介绍的就是一个响应式的表格插件 - 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>[email protected]</td>
</tr>
<tr>
<td>Tom Cruise</td>
<td>555-99911</td>
<td>[email protected]</td>
</tr>
</tbody>
</table>

最后初始化就完成了

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