fixed-header-table 是一个常用的前端组件，通过该组件可以使表格头部固定，方便用户在查看大量数据时进行操作。本文介绍如何使用 npm 包 fixed-header-table 实现该功能。
安装
可以通过 npm 安装：
npm install fixed-header-table
也可以通过 yarn 安装：
yarn add fixed-header-table
使用
首先，在需要使用该组件的页面中引入 fixed-header-table：
<script src="node_modules/fixed-header-table/dist/fixedHeaderTable.min.js"></script> <link rel="stylesheet" href="node_modules/fixed-header-table/dist/fixedHeaderTable.min.css">
接着，创建一个 <table> 元素，并在其中添加 <thead> 和 <tbody> 元素。注意，<thead> 元素中必须包含 <tr> 元素，且该元素应作为表头。
-- -------------------- ---- -------
------ -------------
-------
----
---------- ------
---------- ------
---------- ------
-----
--------
-------
----
------- -- ------ ------
------- -- ------ ------
------- -- ------ ------
-----
----
------- -- ------ ------
------- -- ------ ------
------- -- ------ ------
-----
---- ---- ---- ---
--------
--------最后，在页面加载完成时，调用以下 JavaScript 代码：
new FixedHeaderTable(document.getElementById("myTable"));现在，你可以尝试滚动表格并观察表头是否保持固定不变。
示例
下面是一个完整的示例代码：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
------------ ------ ----- ---------------
----- ---------------- ---------------------------------------------------------------------
-------
------
------ -------------
-------
----
---------- ------
---------- ------
---------- ------
-----
--------
-------
----
------- -- ------ ------
------- -- ------ ------
------- -- ------ ------
-----
----
------- -- ------ ------
------- -- ------ ------
------- -- ------ ------
-----
---- ---- ---- ---
--------
--------
------- ----------------------------------------------------------------------------
--------
--- -----------------------------------------------------
---------
-------
-------深度和学习
npm 包 fixed-header-table 的实现主要依赖于 CSS3 中的 position: sticky 属性。该属性可以指定元素相对于父元素或视口进行定位，并在滚动到指定位置时保持固定不变。
需要注意的是，目前 position: sticky 属性并不支持所有浏览器，具体支持情况可以参考 Can I use。
指导意义
fixed-header-table 是一个非常实用的前端组件，在处理大量数据时能够提升用户的使用体验。在实际的开发中，如果遇到需要滚动表格但同时需要固定表头的需求，可以考虑使用该组件。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/35642