headers属性仅按空格分隔的id字符串查找对应th元素，要求所有id必须真实存在且唯一，不解析斜杠或点号，不跨tbody/table，需确保表头先于数据单元格挂载DOM。
三维复杂嵌套表格中，td 的 headers 属性不能“自动理解”层级关系，它只做一件事：按空格分隔的 id 字符串，逐个查找对应 <th id="xxx"> 元素。只要所有目标 <code><th> 都在同一个 <code><table> 内、且已挂载 DOM，就能精确绑定——不是靠“三维结构”，而是靠你手动写对的 <code>id 列表。
headers 值必须是空格分隔的真实 id，不是路径也不是层级名
比如一个单元格同时属于「年份→季度→城市」三层语义，不能写 headers="year/quarter/beijing" 或 headers="year.quarter.beijing"。浏览器根本不解析斜杠或点号，只认空格：
-
headers="year quarter beijing"✅ 正确：三个独立id，空格分隔 -
headers="year,quarter,beijing"❌ 无效：逗号被当作文本一部分，只查一个叫"year,quarter,beijing"的id -
headers="year 'quarter' beijing"❌ 无效：引号也是字符串内容，查'quarter'（含单引号）这个 ID，不存在 -
headers="year q1"而漏掉beijing→ 屏幕阅读器只读出前两个维度，第三个缺失
多级表头必须逐层显式设 id，且每个 th 只负责自己那一层
常见错误是让顶层 <th> 直接“代表”整个分支，比如：
<pre class="brush:php;toolbar:false;"><th id="year">2024</th>
<th colspan="3">Q1</th>
<th id="beijing">北京</th></pre>
<p>这样写，<code><td headers="year beijing"> 就漏掉了 Q1 这一维。正确做法是给每层都分配独立 id，哪怕视觉上是合并单元格：
立即学习“前端免费学习笔记（深入）”；
- 顶层：
<th id="year">2024</th> - 中间层：
<th id="q1" headers="year">Q1</th>（显式声明它属于 year） - 底层：
<th id="beijing">北京</th> - 数据单元格：
<td headers="q1 beijing">120</td>（只关联直接父级，语义链由中间层headers="year"自动传递）
注意：<td headers="year q1 beijing"> 是冗余的——q1 已经通过自己的 headers="year" 关联了年份，再重复会导致读屏器播报两次“2024”，造成语义污染。
动态渲染时，th 的 id 必须先于 td 的 headers 挂载到 DOM
React/Vue 中常见问题：表格数据先渲染，表头后异步加载，导致 <td headers="q1"> 找不到 <th id="q1">，首次无障碍树构建失败，后续即使 th 补上，也不会自动重连。
- 解决办法：确保表头节点（含
id）在td渲染前已存在于 DOM - 若必须异步加载表头，改用
aria-labelledby替代：<td aria-labelledby="q1 beijing">，并确保目标元素有role="columnheader" - 调试方法：Chrome DevTools → Accessibility 面板 → 点击
td→ 查看 “Related headers” 是否列出全部预期id；为空或不全，说明挂载顺序或id缺失
headers 不跨 tbody，也不跨 table，三维 ≠ 多个表格
所谓“三维”，是指语义维度（时间、地域、指标），不是物理上拆成多个 <table>。如果把不同年份放在不同 <tbody> 里，<th id="year"> 在第一个 <tbody>，而 <td headers="year"> 在第二个 <tbody>，就查不到——headers 只在同一 <table> 内有效，且仅限当前 <tbody>/<thead> 区域。
真正容易被忽略的是：你写的每一个 id，都必须在当前 <table> 的 DOM 树里真实存在、唯一、大小写完全一致、不含空格或非法字符。它不推理、不猜测、不回退，匹配失败就静默失效——没有报错，也没有 fallback，屏幕阅读器只会当它不存在。
