aria-colspan 和 aria-rowspan 不存在于 ARIA 规范，浏览器和屏幕阅读器均不支持，使用会导致 a11y 工具报错；表格跨列跨行必须依赖原生 colspan 和 rowspan 实现语义结构。
aria-colspan 和 aria-rowspan 在 HTML 中根本不能用——它们不存在，浏览器忽略，屏幕阅读器不识别，写了反而可能触发 a11y 工具报错。
为什么找不到 aria-colspan / aria-rowspan
ARIA 规范里压根没定义这两个属性。W3C 官方文档、axe、WAVE、NVDA、VoiceOver 全都不支持。你写 aria-colspan="2"，DOM 里能看到，但辅助技术当它不存在；更糟的是，某些检测工具会把它当作“非法 ARIA 属性”标为错误。
表格跨列跨行的语义必须靠原生 colspan 和 rowspan 实现——这是浏览器构建表格关系模型的唯一依据。
- 原生
colspan/rowspan影响 DOM 结构、渲染逻辑和可访问性树 - ARIA 只能补充角色（如
role="grid"）、状态（如aria-sort）或关联（如headers），不能替代结构 - 试图用 ARIA “模拟”跨格，等于绕过浏览器对表格的深度支持，尤其在旧版读屏中容易丢失行列上下文
原生 rowspan/colspan 怎么写才不出错
它们不是“合并”，而是让一个单元格占据多个逻辑位置。关键在对齐：每行总列数必须一致，被跨越的位置必须跳过对应单元格。
立即学习“前端免费学习笔记（深入）”；
-
colspan="2"→ 当前行少写一个<td>，否则整行变宽、边框断裂 -
rowspan="3"→ 后续两行同一列位置**不能出现任何<td>或<th>**，否则内容重叠或table.rows[i].cells索引错乱 - 数值必须是正整数：
rowspan="0"被忽略为1；填999在 IE 中可能异常 - 混用
rowspan和colspan时，先确保表头列总数固定，再逐行校验cellIndex是否连续
Chrome DevTools 的 Elements 面板右键表格 → “Edit as HTML”，临时删掉疑似多余的单元格，看是否恢复整齐，是最快定位错位的方法。
虚拟表格（div + role="grid"）怎么处理跨格
如果你非得用 div 实现滚动/动态加载表格（即所谓“虚拟表格”），就不能用 colspan/rowspan——因为没有原生表格结构。此时跨格效果是视觉层面的，逻辑位置靠 ARIA 控制：
- 外层容器设
role="grid"，并加aria-label或aria-labelledby - 每行用
role="row"，单元格用role="gridcell"或role="columnheader" - 跨列视觉效果靠 CSS：
grid-column: span 2，但必须同步设置aria-colindex和aria-rowindex告诉读屏“这个单元格实际在第几列第几行” - 不要幻想靠伪造属性偷懒；
aria-colspan这种写法只会让 axe 报aria-allowed-attr错误
无障碍验证时最容易被忽略的点
写完别只看页面长得像不像，要实测：
- NVDA 或 VoiceOver 开启表格导航模式（Ctrl+Alt+方向键），确认能正确跳转行列、读出“第2列，跨2行”这类信息
- 运行 axe 浏览器插件，重点检查：
table是否缺失scope或headers，grid是否漏了aria-rowcount/aria-colcount - 用 JS 读取
document.querySelector('table').rows[0].cells.length，验证是否等于你预期的列数——这是最直接的结构校验
真正难的不是写对 rowspan，而是当表格动态增删行时，手动维护跨格数值和跳过逻辑；多数翻车都发生在 JS 拼接 HTML 后忘了同步删掉被跨越位置的单元格。
