jQuery Table Fixer 是一款适用于前端网页的 JavaScript 库，可以快速实现表格的固定表头和可滚动内容。该库不依赖于其它第三方库，使用非常灵活简单。本文将详细介绍如何使用该 npm 包来实现表格的固定表头和滚动内容。
安装 jquery-table-fixer
在自己的项目中使用 jquery-table-fixer，首先需要安装该 npm 包。使用 npm 安装命令如下：
npm install jquery-table-fixer --save
安装完成之后可以引入该库：
import 'jquery-table-fixer'
实现表格的固定表头
通过 Table Fixer 插件，可以实现表格的固定表头，当表格内容很多时，在页面上滑动时，固定表头会一直显示在页面的顶部。
使用 Table Fixer 插件来实现表格固定表头非常的简单，只需要在表格上调用 tableFixer 方法即可，代码示例如下：
-- -------------------- ---- -------
-- ----
------ -------------
-------
----
--------- ---------
-------- ---------
--------------
-----
--------
-------
----
-------------
------------
-------------------------
-----
---- ------ ---
--------
--------
-- ----------
---------------------------- -
---------------------------
---使用方法如上所示，首先需要在 HTML 中定义一个包含表格的 table 元素，然后在 JavaScript 中使用 tableFixer() 方法实例化该表格元素即可。
实现表格的滚动内容
在 Table Fixer 插件上加一些额外的参数，就可以实现表格的滚动内容，使得表格能够水平和垂直滚动。
具体实现方法如下：
-- -------------------- ---- -------
---- ---- ---
---- ------------------------
------ --------------
-------
----
--------- ---------
-------- ---------
--------------
------------
---- ------ ---
-----
--------
-------
----
-------------
------------
-------------------------
-----------
---- ------ ---
-----
--------
--------
------
---- ---------- ---
---------------------------- -
---------------------------
----------- -----
------ -------
------- --------
-------- -----
--------- -------
------ ----
---
---在 JavaScript 代码中，需要新增一些参数来实现表格的滚动功能：
scrollable：表示是否可以滚动，默认是false，需要设置成true才能启用滚动功能。width：表示表格的宽度，可以设置具体像素值或者百分比值。height：表示表格的高度，可以设置具体像素值或者百分比值。fixHead：表示是否固定表头，默认是false，需要设置成true才能实现固定表头的效果。fixWidth：表示固定表头时的宽度，如果不设置该参数，默认跟width的值是一样的。zebra：表示表格是否显示条纹，默认是false，需要设置成true才能实现表格的条纹效果。
结论
Table Fixer 插件使用非常灵活，只需要引入该包并按照上述方法设置一些参数即可轻松实现表格的固定表头和滚动内容。对于一些需要展示大量数据的场景，Table Fixer 插件提供了非常好的解决办法，可以大大简化开发难度，提高开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005571e81e8991b448d40dc