RWD Table是一款jQuery表格头和列固定插件。该jQuery插件可以在页面滚动时冻结表格头，或在横向拖动滚动条时，冻结某一表格列。

安装

可以通过bower来安装RWD Table插件。

bower install jquery-freeze-table

使用方法

在页面中引入freeze-table.js文件。

<script src="path/to/freeze-table.js"></script>
HTML结构

在表格上添加.table class类，并且用一个<div>元素包裹表格，并未它添加.freeze-tableclass类。

<div class="freeze-table">
  <table class="table">
    <thead>
      <th>...</th>
    </thead>
    <tbody>
      <td>...</td>
    <tbody>
  </table>
</div>
初始化插件

在页面DOM元素加载完毕，通过freezeTable()来初始化该插件。

$(function() {
  $('.freeze-table').freezeTable({});
});

配置参数

参数 类型 默认值 描述
freezeHead boolean true 是否允许<thead>元素在滚动时固定。
freezeColumn boolean true 是否允许表格列在滚动时固定。
freezeColumnHead boolean true 是否允许表格列（头）在滚动时固定。
scrollBar boolean false 是否在X轴上固定滚动条。
fixedNavbar string '.navbar-fixed-top' Fixed navbar deviation consideration. Example: '#navbar'
namespace string 'freeze-table' 表格的命名空间。
columnNum integer 1 冻结列的数量。
columnBorderWidth integer 1 冻结列的附加边框宽度。
columnWrapStyles object null 自定义冻结列的样式。
headWrapStyles object null 自定义冻结表格头的样式。
columnHeadWrapStyles object null 自定义冻结表格头的样式。
callback function null 回调函数
shadow boolean false 是否允许使用box-shadow
backgroundColor string 'white' 表格背景颜色。

该jQuery表格头和列固定插件的github网址为：https://github.com/yidas/jquery-freeze-table