怎样在CSS Grid中实现表格表头固定而内容区域滚动？-css教程-PHP中文网

在css grid中实现表头固定而内容区域滚动，核心做法是将表格容器设为grid布局，定义两行：第一行高度自适应（`auto`）用于放置表头，第二行高度填满剩余空间（`1fr`）并设置垂直滚动。这样表头始终占据顶部位置，不会随内容滚动，而数据行在指定区域内滚动。

怎样在CSS Grid中实现表格表头固定而内容区域滚动？

CSS Grid如何划分表头与内容区域

通过定义`grid-template-rows: auto 1fr;`，Grid将容器划分为逻辑上的两行。第一行`auto`根据表头内容自动调整高度，第二行`1fr`占据剩余所有垂直空间。这种划分方式比传统的Flexbox或绝对定位更直观，因为它直接基于网格轨道进行布局。

怎样在CSS Grid中实现表格表头固定而内容区域滚动？

<div class="grid-table">
  <div class="header-row">
    <div class="cell">ID</div>
    <div class="cell">Name</div>
    <div class="cell">Action</div>
  </div>
  <div class="content-row">
    <div class="cell">1</div>
    <div class="cell">Alice</div>
    <div class="cell">Edit</div>
    <!-- 更多行 -->
  </div>
</div>

.grid-table {
  display: grid;
  grid-template-rows: auto 1fr;
  height: 300px; /* 固定容器高度以触发滚动 */
  border: 1px solid #ccc;
}

.header-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 列宽需与内容区一致 */
  background: #f0f0f0;
  position: sticky;
  top: 0;
  z-index: 1;
}

.content-row {
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

运行上述代码，当`.content-row`内的单元格数量超过可视区域时，仅该区域出现滚动条，表头保持静止。注意`.header-row`和`.content-row`的`grid-template-columns`必须完全一致，否则列宽会对齐失败。

如何处理列宽对齐与滚动性能

在Grid布局中，确保表头和内容区的列宽严格一致是关键。如果列数较多或内容动态变化，建议使用`grid-template-columns: repeat(N, 1fr)`或显式定义每列宽度。此外，由于使用了`overflow-y: auto`，浏览器会独立渲染滚动层，避免重排整个页面，从而保证滚动性能。

CSS

CSS 官方网站入口。访问 W3C 的 CSS 页面，查看 CSS 标准、学习资料与工作组动态；CSS 是 Web 标准，无需下载安装。

下载

怎样在CSS Grid中实现表格表头固定而内容区域滚动？

.grid-table {
  display: grid;
  grid-template-rows: auto 1fr;
  height: 400px;
  grid-template-columns: 100px 200px 150px; /* 显式定义三列宽度 */
}

.header-row,
.content-row {
  display: grid;
  grid-template-columns: inherit; /* 继承父级列定义 */
}

使用`inherit`属性让子元素自动继承父级的列定义，减少重复代码。若列宽不一致，可通过检查浏览器开发者工具的Computed样式，确认`grid-template-columns`是否被意外覆盖。此方法适用于大多数现代浏览器，无需JavaScript干预。