简单实用的jQuery响应式表格插件

jquery.responsive-tables.js是一款轻量级的响应式jQuery表格插件。该响应式表格插件可以在小屏幕设备中将表格内容以列表的方式进行显示。并且它支持一个页面同时存在多个表格实例及合并单元格等。

使用方法

要使用该jQuery响应式表格插件，需要在页面中引入jQuery、jquery.responsive-tables.js和responsive-tables.css文件。

<link rel="stylesheet" href="css/responsive-tables.css" type="text/css">
<script src="js/jquery.min.js"></script>
<script src="js/jquery.responsive-tables.js"></script>                
              

HTML结构

表格的HTML结构要确保使用<thead>和<tbody>元素。在<table>元素上要添加class respond。

<table class="respond">
    <caption>表格的标题</caption>
    <!--表头-->
    <thead>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
    </thead>
    <!--表体-->
    <tbody>
        <tr>
            <td>Airi Satou</td>
            <td>Accountant</td>
            <td>Tokyo</td>
            <td>33</td>
            <td>2008/11/28</td>
            <td>$162,700</td>
        </tr>
        ......
    </tbody>
</table>                
              

初始化插件

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

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

自定义表格

在responsive-tables.css样式表文件中，如果修改了table.respond td:before的top和left属性将会改变移动手机等小屏幕中的表格头padding值。这些属性会影响使表标题和表之间的数据填充的padding。

table.respond td:before { 
    /* top/left values mimics padding */
    top: 8px;/* mimics padding top */
    left: 6px;/* mimics padding left */                
              

你也可以在responsive-tables.css样式表文件中修改你所需要的媒体查询断点。

@media only screen and (max-width: 800px)