在前端开发过程中，表格是一个经常使用的元素。而对于经常需要操作表格的页面，一个固定表头能够大大提高用户的使用体验。jquery-table-fixed-head 就是一个可以实现固定表头效果的 npm 包。
本文将介绍 jquery-table-fixed-head 的使用方法，涉及基本使用、高级配置以及示例代码。
基本使用
首先，需要在项目中安装 jquery-table-fixed-head：
npm install jquery-table-fixed-head
然后，在需要使用固定表头的页面引入 jquery 和 jquery-table-fixed-head：
<script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script> <script src="https://cdn.bootcss.com/jquery.tablefixedhead/1.0.0/jquery.tablefixedhead.min.js"></script>
接下来，在表格的外层包裹一个 div，指定其宽高以及 overflow 属性：
<div style="width: 500px; height: 300px; overflow: auto;">
<table id="table">
<!-- 这里是表格的内容 -->
</table>
</div>最后，在页面加载完成后使用 jquery-table-fixed-head 的方法即可实现固定表头：
$(document).ready(function() {
$('#table').tableFixedHeader();
});这样就可以在 div 中实现一个固定表头的效果了。
高级配置
如果需要对表头的样式进行修改，可以通过传入一个配置对象来实现。
-- -------------------- ---- -------
---------------------------- -
------------------------------
------- ----
---- -
-------------- -------
------------------- ----------
---------------- ---- ----- --------
--
------------- -
---
---其中，height 指定表头的高度，css 指定表头的样式，fixedColumns 指定需要固定的列数。
示例代码
下面是一个完整的示例代码：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------------------------ ----------
------- ------------------------------------------------------------------
------- ------------------------------------------------------------------------------------------------
-------
------
---- ------------- ------ ------- ------ --------- -------
------ -----------
-------
----
-----------
-----------
-----------
-----
--------
-------
----
----------
----------
----------
-----
----
----------
----------
----------
-----
----
----------
----------
----------
-----
----
-----------
-----------
-----------
-----
---- ------- ---
--------
--------
------
--------
---------------------------- -
------------------------------
------- ---
---- -
-------------- -------
------------------- ----------
---------------- ---- ----- --------
--
------------- -
---
---
---------
-------
-------通过上述示例代码，可以更好地理解 jquery-table-fixed-head 的使用方法。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055a3581e8991b448d7d71