必须手动模拟列宽同步、表头固定、跨行单元格控制；响应式需动态切换grid-template-columns并同步调整grid-column；禁用grid-auto-flow:dense以保行序；禁用标签或将其display设为contents。
用 display: grid 替代 <table> 时，哪些结构必须手动模拟<p>纯 CSS Grid 无法自动继承 <code><table> 的语义化行为（如列宽自动对齐、跨行/跨列的单元格合并逻辑、表头与数据行的隐式关联），所以你得自己补上这些“缺失环节”。最常漏掉的是：列宽同步（<code>grid-template-columns 必须显式定义）、表头固定（需配合 position: sticky 和 z-index）、以及跨行单元格的 grid-row 手动控制。否则看起来像表格，但滚动错位、列宽忽宽忽窄、排序后列对不齐——都是因为没接管这些底层约束。如何让 Grid 表格支持响应式列折叠（比如小屏隐藏“操作”列）
关键不是删 DOM，而是用 grid-template-columns 动态切换列轨道，并配合同步的 grid-column 控制每项渲染位置。例如：
/* 默认显示全部列 */
.grid-table { grid-template-columns: 1fr 2fr 1fr max-content; }
<p>/<em> 小屏下隐藏第4列，同时让前3列撑满 </em>/
@media (max-width: 768px) {
.grid-table { grid-template-columns: 1fr 2fr 1fr; }
.grid-table .action-cell { display: none; } /<em> 或更稳妥地设为 grid-column: auto; 并在 JS 中移除该 class </em>/
}注意：不能只靠 display: none 隐藏某列单元格，否则该列轨道仍占位；必须同步收缩 grid-template-columns 定义，否则列宽会失衡。另外，如果用了 grid-area 命名区域，响应式时要重定义整个 grid-template-areas。
grid-auto-flow: dense 在表格场景下为什么通常要禁用
表格数据是强顺序结构，每行必须严格对应一组字段。启用 dense 会让 Grid 尝试填满空缺，打乱原始行顺序——比如第2行的“状态”单元格被提前塞进第1行末尾，破坏可读性与可访问性。真实表格中应始终用：
立即学习“前端免费学习笔记（深入）”；
-
grid-auto-flow: row（默认值，按行顺序填充） - 配合明确的
grid-row和grid-column控制跨行跨列 - 避免依赖
grid-auto-rows自动推导高度，改用minmax(40px, auto)防止内容撑爆
和原生 <table> 混用时，Grid 容器内嵌 <code><tr> 会出什么问题<p>浏览器会强制将 <code><tr> 渲染为 <code>display: table-row，直接覆盖你设的 display: grid，导致 Grid 属性（如 grid-column）完全失效。解决办法只有两个：- 彻底放弃
<table> 标签，用 <code><div class="row"> + <code><div class="cell"> 结构<li>若必须保留语义化标签（如 SEO 或屏幕阅读器需求），则把 Grid 应用在 <code><tbody> 或 <code><thead> 上，而非整个 <code><table>，并确保父级 <code><table> 保持 <code>display: table最易忽略的点：即使你只对 <tbody> 设了 <code>display: grid，也要确认 <tr> 的 <code>display 被重置为 contents，否则它仍会作为匿名容器拦截 Grid 布局流。
<table> 标签，用 <code><div class="row"> + <code><div class="cell"> 结构<li>若必须保留语义化标签（如 SEO 或屏幕阅读器需求），则把 Grid 应用在 <code><tbody> 或 <code><thead> 上，而非整个 <code><table>，并确保父级 <code><table> 保持 <code>display: table最易忽略的点：即使你只对 <tbody> 设了 <code>display: grid，也要确认 <tr> 的 <code>display 被重置为 contents，否则它仍会作为匿名容器拦截 Grid 布局流。
