在前端开发中，有时候需要在网页上展示大量的表格数据。当表格数据超过一定范围时，用户会通过滚动页面来查看所有内容。但是，如果表格数据太大，用户就很难分辨表头信息和每一行的具体数据，因为它们都混在一起了。这时候，我们可以使用 JavaScript 和 CSS 来锁定表格的第一行和第一列，让用户在滚动页面时始终能看到表头和行标。
实现方式
实现表格的第一行和第一列锁定功能，主要思路是将表格拆分成四个部分：左上角、第一行、第一列和其他单元格。左上角部分只包含第一行和第一列的交叉点，第一行部分只包含第一行除去第一个单元格以外的所有单元格，第一列部分只包含第一列除去第一个单元格以外的所有单元格，其他单元格则包含表格的其余部分。
通过将这四个部分分别用 div 元素包裹起来，并设置它们的样式，我们可以实现表格的第一行和第一列锁定效果。
HTML 结构
<div class="table-container"> <div class="corner"></div> <div class="header-row"></div> <div class="header-col"></div> <div class="body"></div> </div>
CSS 样式
-- -------------------- ---- ------- ---------------- - --------- --------- --------- ----- - ------- - --------- --------- ---- -- ----- -- ------ ------ -- ------ -- ------- ----- -- ------ -- ----------------- ----- -------- -- - ----------- - --------- --------- ---- -- ----- ------ -- ------- -- ------ -- ------- ----- ----------------- ----- -------- -- - ----------- - --------- --------- ---- ----- -- ---------- -- ----- -- ------ ------ ------- -- ----------------- ----- -------- -- - ----- - ----------- ----- -- ---------- -- ------------ ------ -- ---------- -- ----------------- -------- -
JavaScript 代码
使用 JavaScript 代码来实现锁定表格第一行和第一列的功能。首先，获取到表格元素并拆分成四个部分。然后，在滚动事件中根据滚动距离计算左上角、第一行和第一列的位置，将它们设置为固定位置（即 position:fixed），使其始终保持在页面上。
-- -------------------- ---- -------
--- ----- - --------------------------------
--- --------- - ------------------------------
-------------------------------------------
--- ------ - ------------------------------
-------------------------------
--- --------- - ------------------------------
--------------------------------------
--- --------- - ------------------------------
--------------------------------------
--- ---- - ------------------------------
---------------------------
--- ---- - -----------
--- ---- - - -- - - ------------ ---- -
--- ----- - --------------
--- ---------- - -------------------------
----------------------------------
-- -- --- -- -
--- ---- - - -- - - ------------- ---- -
--- ---------- - -------------------------
----------------------------------
-
- ---- -
--- --- - ------------------------------
- ----------------------------------------------------------- --------
----------------------------------------------------------------------------------