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内容。

ReStable响应式表格插件的github地址为：https://github.com/micc83/ReStable