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

基于Bootstrap的表格头固定的jQuery表格插件

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

简介

使用该插件需要在页面中引入boostrap的相关文件，以及jQuery和jquery.michiweber.table-head-fixed.js文件。

```html
<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="src/jquery.min.js"></script>
<script src="src/jquery.michiweber.table-head-fixed.js"></script>     
```             
#####  HTML结构
要使表格头固定，你需要为表格的thead元素添加table-fixed-head class类。

```html
<table class="table table-striped table-fixed-head">
  <thead>
    <tr>
      <td>Column 1</td>
      <td>Column 2</td>
      <td>Column 3</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Cell 1</td>
      <td>Cell 2</td>
      <td>Cell 3</td>
    </tr>
    ......
  </tbody>
</table>    
```          
##### 初始化插件
你也可以使用JavaScript来手动初始化该头部固定表格。

```html
$('table').tfh([options]);
```                  
#####  配置参数

| 参数  | 默认值  |描述   |
| ------------ | ------------ | ------------ |
|toggle|0|页面滚动时，当<thead>固定时距页面顶部的距离|
|top|0|页面滚动时，当<thead>固定时距页面顶部的默认距离|

你可以通过data-属性直接在HTML标签中设置这些属性。

| 参数  | 属性  |
| ------------ | ------------ |
|  toggle |  data-table-fixed-head-trigger |
| top  |  data-table-fixed-head-top |

例如：

```html
<table class="table-fixed-head"
       data-table-fixed-head-trigger="20"
       data-table-fixed-head-top="50">   
```