本文介绍如何利用 css grid 的 grid-template-rows: auto 1fr 技巧，无需 javascript 计算或硬编码像素值，即可让 <tbody> 自适应填充父容器扣除 <thead> 和其他元素后的剩余高度，同时保持表头固定、滚动流畅。
本文介绍如何利用 css grid 的 grid-template-rows: auto 1fr 技巧，无需 javascript 计算或硬编码像素值，即可让 <tbody> 自适应填充父容器扣除 <thead> 和其他元素后的剩余高度，同时保持表头固定、滚动流畅。
在构建数据密集型管理界面（如员工信息表）时，常需实现「表头固定 + 表体占满剩余空间 + 垂直滚动」的布局效果。传统做法往往依赖 JavaScript 动态计算高度，或使用 calc() 手动减去标题、表头等已知高度——既脆弱又难以维护。
现代、简洁、可靠的解决方案是：将 <table> 元素设为 CSS Grid 容器，并定义两行布局。
✅ 核心原理：Grid 的 auto 与 1fr 协同
- grid-template-rows: auto 1fr 将表格内容划分为两行：
- 第一行（auto）：自然包裹 <thead> 高度（含内边距、字体大小等所有渲染因素）；
- 第二行（1fr）：自动分配剩余全部可用高度，恰好容纳 <tbody>，且支持内部滚动。
⚠️ 注意：此方案要求 <thead> 和 <tbody> 是 <table> 的直接子元素（符合 HTML 标准），且 <table> 必须设置 display: grid —— 此时它不再以传统表格盒模型渲染，但语义结构和可访问性完全保留。
✅ 完整实现代码
.tableFixHead {
overflow: auto;
height: 80vh; /* 父容器设定明确高度（如视口百分比） */
}
/* 关键：将 table 变为 Grid 容器 */
table {
display: grid;
grid-template-rows: auto 1fr; /* thead 自适应，tbody 占满剩余 */
border-collapse: collapse;
width: 100%;
}
.tableFixHead thead th {
position: sticky;
top: 0;
z-index: 1;
background: #eee;
padding: 8px 16px;
}
th, td {
padding: 8px 16px;
}<div>
<h1>EMPLOYEE DATA FOR MAY 2023</h1>
</div>
<div class="tableFixHead">
<table>
<thead>
<tr><th>SR.NO</th><th>EMPLOYEE</th></tr>
</thead>
<tbody>
<!-- 45+ 行数据（略） -->
<tr><td>1</td><td>Hritik</td></tr>
<tr><td>2</td><td>Jay</td></tr>
<!-- ... -->
<tr><td>45</td><td>Mayur</td></tr>
</tbody>
</table>
</div>✅ 为什么比 calc() 或 JS 更优？
| 方案 | 维护成本 | 响应式友好 | 动态内容兼容 | 浏览器兼容性 |
|---|---|---|---|---|
| calc(100% - 64px) | 高（需手动测标题/表头高度） | ❌ 易失效（字体缩放、响应式断点） | ❌ 新增行/样式后需重调 | ✅ 广泛支持 |
| JavaScript 高度计算 | 高（需监听 resize、DOM 变化） | ✅ | ✅ | ✅（但逻辑复杂） |
| display: grid + 1fr | 极低（声明式、零计算） | ✅ 原生适配 | ✅ 自动响应内容变化 | ✅ Chrome 66+/Firefox 63+/Safari 14.1+ |
? 提示：若需支持旧版 Safari（<14.1），可添加 -webkit-box 回退；但绝大多数现代业务系统已无需考虑 IE 或老旧 Safari。
✅ 注意事项与最佳实践
- 勿滥用 border-collapse：Grid 模式下 border-collapse 仅影响单元格边框渲染，不影响布局逻辑，可安全保留。
- 滚动容器必须是 .tableFixHead：确保 overflow: auto 设置在包裹 <table> 的外层 div 上，而非 <table> 本身（否则 sticky 失效）。
- 避免嵌套 display: grid 冲突：若 <tbody> 内部有自定义布局需求，建议用 <div> 包裹并设为独立 Grid/Flex 容器，而非修改 <tbody> 的 display。
- 无障碍保障：该方案不改变 HTML 语义结构，屏幕阅读器仍能正确识别 <table>、<thead>、<tbody> 关系，符合 WCAG 2.1 表格规范。
通过这一简明有力的 Grid 布局技巧，你彻底告别了“算高度”的繁琐逻辑，让 <tbody> 真正智能地填满空间——专注数据呈现，而非布局博弈。
