jquery-table-fixed-head是一款基于Bootstrap的表格头固定的jQuery表格插件。通过该jQuery插件，可以非常容易的使原生Bootstrap的表格在向下滚动时表格头位置固定不动，非常实用。

使用方法

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

<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类。

<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来手动初始化该头部固定表格。

$('table').tfh([options]);

配置参数

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

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

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

例如：

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

jquery-table-fixed-head插件的github地址为：https://github.com/michiweber/jquery-table-fixed-head