html5 表格型插件,ReStable-轻量级jQuery响应式表格插件

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

使用方法

在页面中引入jquery/jquery.restable.min.js和jquery.restable.min.css文件。

HTML结构

该表格采用基本的HTML表格结构：

表格头1表格头2表格头3表格头4

单元格1单元格2单元格3单元格4单元格5单元格6单元格7单元格8单元格9单元格10单元格11单元格12

初始化插件

在页面DOM元素加载完毕之后，可以通过ReStable()方法来初始化该响应式表格插件。

$(document).ready(function () {

$('.mytable').ReStable();

});

上面的方法将页面中所有的表格都进行初始化。你也可以单独对某个表格进行初始化。

$(document).ready(function () {

$('.mytable').ReStable();

});

配置参数

该响应式表格插件的可用参数如下：

$('.mytable').ReStable({

rowHeaders: true,

maxWidth: 480,

keepHtml: false

});

rowHeaders：是否显示表格头。

maxWidth：响应式断点。

keepHtml：是否保持每个单元格的HTML内容。