CSS Grid 布局实现可滚动的固定表头表格的完整教程-JavaScript中文网-JavaScript教程资源分享门户

前言

在网页开发中，表格是不可缺少的一部分。但是，在使用 Html 自带的表格标签时，当表格内容较多时，表头就会随着滚动消失，给用户带来不便。本文将介绍如何使用 CSS Grid 布局实现可滚动的固定表头表格。

CSS Grid 布局

CSS Grid 布局是 CSS 的一种新的布局方式，它是一个二维的布局系统，可以用来实现复杂的布局。CSS Grid 布局是通过将容器分成若干行和列来实现布局。

在接下来的实现过程中，我们将使用 CSS Grid 布局来实现可滚动的固定表头表格。

实现过程

首先我们需要创建一个容器 div，并设置其为网格容器。代码如下：

<div class="container">
  <!-- 表头 -->
  <div class="header">表头</div>
  <!-- 表格主体部分 -->
  <div class="body">表格内容</div>
</div>

.container {
  display: grid;
  grid-template-rows: auto 1fr;
}

上面的代码中，我们将容器设置为网格容器，并通过 grid-template-rows 属性将容器分成两行。第一行为自适应高度的表头，第二行为占据剩余空间的表格主体部分。

接下来，我们需要定义表头和表格主体部分的网格布局。代码如下：

// javascriptcn.com 代码示例
.container {
  display: grid;
  grid-template-rows: auto 1fr;
  grid-template-columns: repeat(4, 1fr);
}

.header {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.body {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

上面的代码中，我们首先通过 grid-template-columns 属性将表头和表格主体部分都分成四列。然后，我们将表头的 gridColumn 属性设置为 1 / -1，这样表头会占据所有的列。

接下来，我们需要给表格主体部分设置 overflow-y: auto 属性，将其设置为可滚动的，并给表格主体部分设置一个固定高度，使其具有滚动条。同时，我们还要将表格主体部分的网格布局设置为 grid-template-columns: repeat(4, 1fr), 保证表格主体部分和表头的列数一致。代码如下：

// javascriptcn.com 代码示例
.container {
  display: grid;
  grid-template-rows: auto 1fr;
  grid-template-columns: repeat(4, 1fr);
}

.header {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.body {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  overflow-y: auto;
  max-height: 200px;
}

最后，我们需要给表格主体部分的父元素设置 position: relative 属性，并给表头设置 position: sticky 和 top: 0 属性，将其固定在网格容器的顶部。代码如下：

// javascriptcn.com 代码示例
.container {
  display: grid;
  grid-template-rows: auto 1fr;
  grid-template-columns: repeat(4, 1fr);
  position: relative;
}

.header {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  position: sticky;
  top: 0;
}

.body {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  overflow-y: auto;
  max-height: 200px;
}

到此为止，我们已经成功实现了可滚动的固定表头表格。完整代码如下：

<div class="container">
  <!-- 表头 -->
  <div class="header">表头</div>
  <!-- 表格主体部分 -->
  <div class="body">表格内容</div>
</div>

// javascriptcn.com 代码示例
.container {
  display: grid;
  grid-template-rows: auto 1fr;
  grid-template-columns: repeat(4, 1fr);
  position: relative;
}

.header {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  position: sticky;
  top: 0;
}

.body {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  overflow-y: auto;
  max-height: 200px;
}

总结

本文介绍了如何使用 CSS Grid 布局实现可滚动的固定表头表格。通过将容器分成两行，第一行为自适应高度的表头，第二行为占据剩余空间的表格主体部分，并设置 overflow-y: auto 属性使其可滚动，并通过将表头的 gridColumn 属性设置为 1 / -1，将其固定在容器的顶部。本文提供了完整的代码示例，希望可以对读者有所帮助。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/6545edb07d4982a6ebfa0eb6