直接用display: grid替代<table>是最干净的解法，但必须避开语义丢失、内容撑破列、表头冻结失效三类高频问题：语义上<table>加display: grid会废除<thead><colgroup>等结构，导致无障碍和Excel导出失效；内容上fr单位非绝对均分，需min-width: 0+overflow: hidden防撑破；表头冻结需物理拆分容器并用subgrid同步列宽或JS降级。
直接用 display: grid 替代 <table> 是最干净的解法，但必须避开语义丢失、内容撑破列、表头冻结失效这三类高频翻车点。
为什么不能给 <table> 加 display: grid
加了就不是表格了。<table> 的语义结构（<thead>、<colgroup>、rowspan）在 display: grid 下全部失效，屏幕阅读器读不到表头关联，导出 Excel 也丢结构。更隐蔽的问题是：给 <tr> 加 display: contents 想“透传”进 Grid，结果整行被跳过，无障碍测试直接报错。
- 真要保留语义——用
table-layout: fixed+ 显式width和col宽度，但响应式重排能力归零 - 真要灵活布局——用
<div>套display: grid，把每行当一个<div class="row">，列用grid-column控制位置 - 混合写法（比如
<table>里嵌divGrid）会导致渲染不一致，Chrome 和 Safari 表现可能不同
列宽不均等？fr 单位不是“平均分”
1fr 1fr 1fr 看似均分，实际是“按剩余空间比例分配”。只要某列内容撑开（比如长文本、图片、未设 min-width: 0），它就吃掉更多空间，其他列被压缩——这不是 bug，是 fr 的设计逻辑。
- 防撑破：关键列加
min-width: 0+overflow: hidden，再配text-overflow: ellipsis和white-space: nowrap - 强制平铺：用
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)))，浏览器自动算能塞几列，每列至少 200px，多余空间再均分 - 金额列对齐小数点：外层右对齐，内部再套一层
display: grid，列定义为grid-template-columns: 1fr max-content，把整数和小数部分拆开控制
怎么固定表头又不破坏网格对齐
Grid 本身不支持“冻结某几行”，position: sticky 在整个 Grid 容器内滚动时会整体位移。想只冻表头，必须物理拆开容器。
立即学习“前端免费学习笔记（深入）”；
- 表头单独一个
<div class="header-grid">，设position: sticky; top: 0; z-index: 10 - 数据体另起一个
<div class="body-grid">，设overflow-y: auto，高度自控 - 两容器列宽同步：父级设
display: grid+grid-template-columns，子容器用grid-template-columns: subgrid继承轨道（Safari 15.6+ 支持，旧版需 JS 同步宽度） - 多级表头（比如一级标题 + 二级分组栏）要分别设
top: 0和top: 48px（假设首行高 48px），否则会重叠
gap 设置不当会让表单/报表看起来“挤”还是“散”
gap 是统一控制行列间距的唯一入口，但它不作用于子元素自身 margin 或 padding。设太小，单元格贴在一起；设太大，空隙割裂信息流。
- 表单场景推荐
gap: 12px 20px（行距小、列距大），标签和输入框视觉分组更清晰 - 报表场景用
gap: 8px全局统一，避免金额列因间隙过大导致对齐偏移 - 别混用：
gap和子元素margin同时存在时，间隙会叠加，调试时容易误判 - 响应式断点里改
gap值比改列数更轻量，比如小屏从gap: 12px缩到gap: 6px，比重写grid-template-columns更稳
真正难的不是写出正确的 grid-template-areas，而是当某列突然插入带换行的备注文本时，整行高度突变导致下方所有行错位——这时候 grid-auto-rows: minmax(48px, auto) 比硬写固定高度更可靠。
