前言
在网页开发中，表格是不可缺少的一部分。但是，在使用 Html 自带的表格标签时，当表格内容较多时，表头就会随着滚动消失，给用户带来不便。本文将介绍如何使用 CSS Grid 布局实现可滚动的固定表头表格。
CSS Grid 布局
CSS Grid 布局是 CSS 的一种新的布局方式，它是一个二维的布局系统，可以用来实现复杂的布局。CSS Grid 布局是通过将容器分成若干行和列来实现布局。
在接下来的实现过程中，我们将使用 CSS Grid 布局来实现可滚动的固定表头表格。
实现过程
首先我们需要创建一个容器 div，并设置其为网格容器。代码如下：
---- ------------------ ---- -- --- ---- ----------------------- ---- ------ --- ---- ----------------------- ------
---------- - -------- ----- ------------------- ---- ---- -
上面的代码中，我们将容器设置为网格容器，并通过 grid-template-rows 属性将容器分成两行。第一行为自适应高度的表头，第二行为占据剩余空间的表格主体部分。
接下来，我们需要定义表头和表格主体部分的网格布局。代码如下：
---------- - -------- ----- ------------------- ---- ---- ---------------------- --------- ----- - ------- - ------------ - - --- -------- ----- ---------------------- --------- ----- - ----- - -------- ----- ---------------------- --------- ----- -
上面的代码中，我们首先通过 grid-template-columns 属性将表头和表格主体部分都分成四列。然后，我们将表头的 gridColumn 属性设置为 1 / -1，这样表头会占据所有的列。
接下来，我们需要给表格主体部分设置 overflow-y: auto 属性，将其设置为可滚动的，并给表格主体部分设置一个固定高度，使其具有滚动条。同时，我们还要将表格主体部分的网格布局设置为 grid-template-columns: repeat(4, 1fr), 保证表格主体部分和表头的列数一致。代码如下：
---------- - -------- ----- ------------------- ---- ---- ---------------------- --------- ----- - ------- - ------------ - - --- -------- ----- ---------------------- --------- ----- - ----- - -------- ----- ---------------------- --------- ----- ----------- ----- ----------- ------ -
最后，我们需要给表格主体部分的父元素设置 position: relative 属性，并给表头设置 position: sticky 和 top: 0 属性，将其固定在网格容器的顶部。代码如下：
---------- - -------- ----- ------------------- ---- ---- ---------------------- --------- ----- --------- --------- - ------- - ------------ - - --- -------- ----- ---------------------- --------- ----- --------- ------- ---- -- - ----- - -------- ----- ---------------------- --------- ----- ----------- ----- ----------- ------ -
到此为止，我们已经成功实现了可滚动的固定表头表格。完整代码如下：
---- ------------------ ---- -- --- ---- ----------------------- ---- ------ --- ---- ----------------------- ------
---------- - -------- ----- ------------------- ---- ---- ---------------------- --------- ----- --------- --------- - ------- - ------------ - - --- -------- ----- ---------------------- --------- ----- --------- ------- ---- -- - ----- - -------- ----- ---------------------- --------- ----- ----------- ----- ----------- ------ -
总结
本文介绍了如何使用 CSS Grid 布局实现可滚动的固定表头表格。通过将容器分成两行，第一行为自适应高度的表头，第二行为占据剩余空间的表格主体部分，并设置 overflow-y: auto 属性使其可滚动，并通过将表头的 gridColumn 属性设置为 1 / -1，将其固定在容器的顶部。本文提供了完整的代码示例，希望可以对读者有所帮助。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6545edb07d4982a6ebfa0eb6