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

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]);                  
                

配置参数

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

例如：

<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