不能给 加 display: grid，因为会废掉所有表格语义（、rowspan/colspan 失效）， 强制为 table-row 使 grid-column 无效，导致读屏器跳过内容、导出失败。
直接用 display: grid 替换旧 <table> 标签几乎必然导致语义丢失、键盘导航错乱和屏幕阅读器无法识别行列关系——这不是写法问题，而是浏览器渲染层对 <code><table> 元素的语义绑定不可覆盖。
<h3>为什么不能给 <code><table> 加 <code>display: grid
加了就废掉所有表格语义：<thead>、<code><colgroup></colgroup>、rowspan 和 colspan 全部失效。更隐蔽的是，<tr> 会被强制渲染为 <code>display: table-row，你写的 grid-column 属性根本不会生效。实测中，NVDA + Chrome 组合会跳过整行内容，Excel 导出插件也读不到结构。
- 别尝试用
display: contents“透传”<tr> —— 它会让无障碍树直接丢掉该行节点 <li>别混用：在 <code><table> 内部嵌 <code>div并设display: grid，Safari 和 Chrome 渲染结果不一致 - 真要保留导出或读屏能力，必须彻底放弃
<table> 标签，改用语义化 <code>div结构 + ARIA 补足如何安全迁移含
rowspan/colspan的老表格跨行跨列不是靠“猜”，得从原始 HTML 精确提取位置信息。先用开发者工具右键目标
<table> → “Edit as HTML” 备份结构，再运行： <pre class="brush:php;toolbar:false;">document.querySelectorAll('tbody tr td[rowspan], tbody tr td[colspan]').forEach(el => { console.log(`行:${el.parentElement.rowIndex}, 列:${Array.from(el.parentElement.children).indexOf(el)}, rowspan:${el.rowSpan}, colspan:${el.colSpan}`) })</pre> <p>拿到起始行索引和跨值后，在 Grid 中显式控制：</p> <ul> <li> <code>rowspan="2"→ 对应单元格加grid-row: 3 / 5（注意：行号从 1 开始，且需按实际 DOM 顺序计算起始行） -
colspan="3"→ 加grid-column: span 3，但必须确保其前序单元格已占满左侧轨道 - 同时存在
rowspan和colspan时，禁用grid-auto-flow: dense，否则自动填空会打乱 DOM 顺序，破坏 Tab 键遍历路径
表头固定 + 滚动区域怎么不翻车
Grid 本身不支持“冻结某几行”，position: sticky 在整个 Grid 容器内滚动时会整体位移。必须物理拆分容器：
- 表头单独一个
<div class="header-grid">，设 <code>position: sticky; top: 0; z-index: 10 - 数据体另起一个
<div class="body-grid">，设 <code>max-height: 400px; overflow-y: auto - 两容器列宽同步：父级用
display: grid+grid-template-columns定义轨道，子容器用grid-template-columns: subgrid（仅 Safari 15.6+ 和 Chrome 117+ 支持）；旧版浏览器需 JS 监听父级列宽并手动同步 - 多级表头（如分类栏+字段栏）要分别设
top: 0和top: 48px，否则重叠 - 默认：
grid-template-columns: 1fr 2fr 1fr max-content - 小屏：
@media (max-width: 768px) { .grid-table { grid-template-columns: 1fr 2fr 1fr; } } - 对应“操作”列单元格，建议统一加
class="action-cell"，并在媒体查询中移除该 class 或设grid-column: auto避免残留定位 - 若用了
grid-template-areas，响应式时必须重定义整个字符串，不能只改列数
响应式列折叠时最易忽略的细节
小屏下隐藏“操作”列，不能只对单元格设 display: none —— 轨道仍占位，列宽会失衡。必须同步收缩定义：
真正难的不是写出能看的 Grid，而是让每行 DOM 顺序严格对应逻辑行、每个跨单元格的网格线起点与原表完全一致、每个可访问性属性都指向正确 ID —— 这些细节漏一项，用户就可能卡在表单里出不来。
