根本原因是表头与数据单元格缺乏明确语义关联，需改用headers+id显式绑定：为每个<th>设唯一id，<td>通过headers="id1 id2"空格分隔引用，确保跨层、跨行/列复杂结构下屏幕阅读器准确播报。
rowspan/colspan 后屏幕阅读器读不出上下文怎么办
根本原因不是属性写错了，而是表头和数据单元格之间缺乏明确的语义关联。浏览器能渲染合并后的视觉结构，但屏幕阅读器无法自动推断“这个 td 属于哪几个 th”。scope 在简单表格中够用，一旦出现多层表头或跨行+跨列混合布局，scope 就失效了。
必须改用 id + headers 显式绑定：
-
<th id="dept">部门</th>和<th id="q1">Q1</th>分别定义两个维度表头 - 对应数据单元格写成
<td headers="dept q1">销售部</td>，用空格分隔多个id - 确保每个
id全局唯一，且所有被引用的th都在当前<table>内
混合 rowspan+colspan 时列数对不齐导致表格错乱
这是最常踩的坑：浏览器不会报错，但 DOM 结构已损坏，CSS 选择器失灵、JS 获取列索引出错、响应式断点下内容挤作一团。问题本质是“合并后实际列数”与“代码中写的 td 数量”不一致。
验证和修复方法：
立即学习“前端免费学习笔记（深入）”；
- 打开开发者工具，选中任意一行
<tr>，运行Array.from(tr.children).reduce((sum, el) => sum + (el.colSpan || 1), 0)，结果必须等于表头第一行展开后的总列数 - 跨行单元格（
rowspan>1）所在列，在后续行中对应位置**必须跳过**写td；否则等于重复占位 - 避免在
<thead>里用rowspan，同时又在<tbody>第一行用colspan——二者叠加极易让列基准偏移
复杂表头下 scope 属性为什么不起作用
scope 只支持单层关系：要么关联整列（scope="col"），要么关联整行（scope="row"）。当表头本身是跨列合并的（比如一个 <th colspan="2">销售额</th> 下面再分“线上”“线下”两列），scope 无法表达这种嵌套归属。
此时必须放弃 scope，改用 headers：
- 给顶层表头（如“销售额”）设
id="sales"，给子表头（“线上”“线下”）分别设id="online"、id="offline" - 数据单元格写成
<td headers="sales online">120万</td>，明确它同时属于“销售额”大类和“线上”子类 - 注意：部分旧版 JAWS 对
headers支持不稳定，但 NVDA 和 VoiceOver 均可可靠识别
响应式场景下跨列单元格右侧留白或截断
colspan 值超过当前视口可用列数时，浏览器不会报错，但超出部分被静默截断——看起来“铺满整行”，实际右边留白，小屏下尤其明显。
安全做法：
- 避免硬编码大数值如
colspan="12"；改用 CSSwidth: 100%或grid-column: 1 / -1替代视觉铺满需求 - 动态生成表格时，用 JavaScript 校验每行总列数是否一致：
tr.children.length不可靠，必须用colSpan累加 - 真需要跨列语义（比如汇总行），优先考虑把汇总数据抽离到
<tfoot>，用独立结构替代跨列
headers 当成可选优化项——它在复杂表格里不是“加分项”，而是可访问性的底线。 
