直接用 css grid 替换 常失败，因历史表格嵌套深、rowspan/colspan 混用且含内联样式；需保留语义（用 aria 补足）、精准映射跨行跨列、验证可访问性与打印效果。

为什么直接用 CSS Grid 替换 <table> 常常失败 <p>不是 Grid 不行，而是历史表格往往嵌套多层、<code>rowspan/colspan 混用、还混着 <font></font> 和内联样式。直接套 Grid 模板会丢数据结构，比如一个跨 3 行的标题单元格，在 Grid 里没对应语义锚点，结果是视觉错位或内容截断。

实操建议：

• 先用浏览器开发者工具选中目标 <table>，右键 → “Edit as HTML”，复制原始结构备用 <li>用 <code>document.querySelectorAll('table tbody tr td, table tbody tr th') 检查是否存在动态生成的单元格（比如 JS 插入），这类不能只靠静态 HTML 分析
• 对含 rowspan > 1 的单元格，记录其起始行索引和跨行数，后续需在 Grid 中用 grid-row 显式控制

如何保留语义又摆脱 <table> 标签 <p>屏幕阅读器依赖 <code><table> 的语义做行列导航，纯 div + Grid 会丢失这个能力。但 W3C 允许用 ARIA 属性补足——关键是补得准，不是加了 <code>role="table" 就完事。

实操建议：

• 外层容器设 role="table"，同时加 aria-label（如 aria-label="用户订单列表"），不能留空
• 每行用 role="row"，每单元格用 role="cell" 或 role="columnheader"/role="rowheader"，严格对应原表头位置
• 若原表有 <caption></caption>，必须转为 aria-labelledby 指向对应 ID，否则读屏软件无法关联
• 避免在 Grid 容器上同时写 display: grid 和 role="table"——部分旧版 NVDA 会冲突，优先保证 ARIA 层级正确

colspan 和 rowspan 在 CSS Grid 中的等效写法

Grid 的 grid-column 和 grid-row 能模拟合并，但行为不完全等价：原表格单元格内容自动撑高，而 Grid 需手动处理内容溢出和对齐。


html-deploy
使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。
下载

实操建议：

• colspan="3" → 对应单元格加 grid-column: span 3；rowspan="2" → 加 grid-row: span 2
• 若跨行单元格内容较多，加 align-self: start 防止被下方行内容顶高
• 遇到 rowspan 和 colspan 同时存在（如 rowspan="2" colspan="3"），必须确保该单元格在 Grid 中的起始网格线位置与原表一致，可用 grid-row: 2 / 4 + grid-column: 1 / 4 显式指定
• 不要依赖 grid-auto-flow: dense 自动填空——它会打乱 DOM 顺序，影响键盘 Tab 顺序和读屏遍历

重构后必须验证的三个硬性指标

代码跑起来不报错，不等于重构成功。老页面常被内部系统深度集成，漏掉一项就可能引发下游故障。

实操建议：

• 用 window.getComputedStyle(el).display 确认关键容器最终计算值是 "grid"，而非被其他 CSS（如第三方库重置）覆盖回 "block"
• 打开 Chrome DevTools 的 Accessibility 面板，检查每个 role="cell" 是否有正确的 aria-rowindex 和 aria-colindex（可写小脚本批量校验）
• 用 document.querySelectorAll('[role="table"] [role="row"]').length 对比原表 <tr> 数量，差一个都说明某行被意外折叠或未标记 <p>最易被忽略的是打印样式——很多遗留系统仍依赖浏览器默认打印，而 Grid 布局在 <code>@media print 下表现不稳定，必须单独测试实际打印预览效果。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！