在css grid中实现表头固定而内容区域滚动，核心做法是将表格容器设为grid布局，定义两行：第一行高度自适应（`auto`）用于放置表头，第二行高度填满剩余空间（`1fr`）并设置垂直滚动。这样表头始终占据顶部位置，不会随内容滚动，而数据行在指定区域内滚动。
CSS Grid如何划分表头与内容区域
通过定义`grid-template-rows: auto 1fr;`，Grid将容器划分为逻辑上的两行。第一行`auto`根据表头内容自动调整高度，第二行`1fr`占据剩余所有垂直空间。这种划分方式比传统的Flexbox或绝对定位更直观，因为它直接基于网格轨道进行布局。
<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`，浏览器会独立渲染滚动层，避免重排整个页面，从而保证滚动性能。
.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干预。
当表头包含复杂交互元素时会发生什么
如果表头中包含按钮、下拉菜单等交互元素，它们会正常响应点击事件，因为表头处于静态布局层。但需注意，若表头设置了`position: sticky`，其z-index必须高于内容区，否则滚动时内容可能遮挡表头。实际测试中，添加`z-index: 1`到`.header-row`可解决遮挡问题。
