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)
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!