浙江 杭州

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

系统分类: 网页特效 - jquery插件 - jQuery表格插件 2016-07-13

人气6064

亲们该页面内会员们分享的“作品”,版权为才华横溢的原作者们所有滴,不得商业使用!


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:beforetopleft属性将会改变移动手机等小屏幕中的表格头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)                
              

查看演示
下载资源:0
下载资源
错误提交:

格式:zip 大小:83.33KB

================关于优设记================
“优设记ui3g.com“是国内最全jquery插件下载 - 高质量网页素材的学习下载平台
资源微博:同步网站更新内容,订阅jquery资源 @吐槽优设记,欢迎关注获取网页设计资源、下载顶尖设计素材。
文章链接: http://www.ui3g.com/code/uicode-1652.html 非特殊说明,本文版权归原作者所有,转载请注明出处
简单实用的jQuery响应式表格插件

我当前G币余额:0 已下载次数:0

注:购买该插件的用户当日可免费下载 插件作者可永久免费下载

所需G币:20

下载提示:由于文件较小,请直接点击下载,不支持迅雷等下载工具。

抱歉 G币 不足,你可以通过 上传PSD & jquery 充值 获得G币

    
标签 表格 响应式 

多一点耐心少一点浮躁有什么新鲜事想告诉大家? 分享有礼 +5G币:(已有0 评论)