当前位置：首页 > 网页特效 > 表格

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

分类：表格日期：2024-05-14 点击(9) 评论(0)

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

简介

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

```html
<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。

```html
<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响应式表格插件。

```html
$(document).ready(function() {
    $.responsiveTables();    
});    
```            
#####  自定义表格
在responsive-tables.css样式表文件中，如果修改了table.respond td:before的top和left属性将会改变移动手机等小屏幕中的表格头padding值。这些属性会影响使表标题和表之间的数据填充的padding。

```html
table.respond td:before { 
    /* top/left values mimics padding */
    top: 8px;/* mimics padding top */
    left: 6px;/* mimics padding left */   
```            
你也可以在responsive-tables.css样式表文件中修改你所需要的媒体查询断点。

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

web299.com

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

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果