开发了一个小型jQuery插件，用于创建具有固定页眉、页脚和列的HTML表。

使用此插件，您可以滚动浏览表的内容，但始终可以看到顶部的页眉（底部的页脚，左侧的指定列）。

参见：

• 粘性表头的10个最佳JavaScript插件
• JavaScript和CSS中的10个最佳响应表插件

如何使用它:

1.加载jquery.fixedheadertable.js正确安装jQuery库之后的脚本。

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/jquery.fixedheadertable.js"></script>

2.要冻结页眉和页脚，您的HTML表必须具有剧院和设计表尾样式元素。

<table class="example">
  <thead>
    <tr>
      ...
    </tr>
  </thead>
  <tfoot>
    <tr>
      ...
    </tr>
  </tfoot>
  <tbody>
    <tr>
      ...
    </tr>
  </tbody>
</table>

3.调用HTML表上的函数。

$('.example').fixedHeaderTable({
  footer: true,
});

4.或者，如果您的表没有设计表尾样式要素

$('.example').fixedHeaderTable({
  footer: true,
  cloneHeadToFoot: true,
});

5.在表格左侧粘贴指定数量的列。

$('.example').fixedHeaderTable({
  fixedColumns: 2
});

6.确定是否隐藏HTML表，直到插件初始化为止。默认值：true。

$('.example').fixedHeaderTable({
  autoShow: false,
});

7.该插件还提供了几个选项来设置HTML表的样式。

$('.example').fixedHeaderTable({
  altClass: 'altClass',
  themeClass: 'wrapperClass',
  width: '100%',
  height: '100%',
  borderCollapse: true,
});

预览截图

创建 固定页眉、页脚和列 表 jQuery Fixedheaderable.js