headers属性在嵌套表格中仅限当前table内生效，不跨表、不穿透、不继承；子表th的id只能被子表td引用，父表td只能引用父表th，且id须大小写精确、无空格、同表存在。

headers属性在嵌套表格里根本不会跨层生效

你写的 <td headers="name"> 永远只会在**当前 <code><table> 内部**查找 <code>id="name" 的 <th>，哪怕子表格嵌在 <code><td> 里，它的 <code><th> 对父表的 <code><td> 来说完全不可见。这不是 bug，是规范强制限定：headers 只认同级 table 下的 id，不支持跨 table、不穿透嵌套、不继承父级上下文。 <p>常见错误现象：</p> <ul><li>父表 <code><td headers="q1"> 显示空白关联 → 实际是因为子表格里的 <code><th id="q1"> 不在同一个 <code><table> 节点下 <li>DevTools Accessibility 面板里 “Related headers” 列为空 → 表明没找到匹配的 id，不是读屏器问题，是 DOM 范围不对</li> <li>用 JavaScript 手动查 <code>document.getElementById("q1") 能拿到元素，但 td.headers 仍不生效 → 因为该 <th> 属于另一个 table，不在 headers 的搜索域内 <h3>深层嵌套时，headers 必须按“表级隔离”单独定义</h3> <p>每个 <code><table> 都是独立的语义单元。子表格里的数据单元格，只能引用**自己所在 table 内**的 <code><th id="xxx">；父表格里的数据单元格，也只能引用父 table 自己的 <code><th>。两者不能混用，也不需要混用。 <p>实操建议：</p> <ul><li>给每个嵌套层级的 <code><table> 单独命名 class（如 <code>class="sales-summary"、class="sales-detail"），避免 id 冲突

子表格的 <th> 必须带 <code>id，且该 id **只供子表格内部的 <td> 使用**，例如：<code><th id="product-name"> → <code><td headers="product-name"> <li>父表格中如果某个 <code><td> 本身要承载子表格，它不需要 headers —— 它的语义由父表自身表头定义；子表格的语义由它自己的 headers 定义 <li>不要试图用一个 headers 同时指向父表和子表的 th —— 浏览器直接忽略，因为至少一半 id 找不到</li> <h3>动态渲染嵌套表格时，id 挂载顺序决定 headers 是否可用</h3> <p>如果你用 JS 动态生成子表格，必须确保：子表格的 <code><th id="xxx"> 在子表格的 <code><td headers="xxx"> 渲染前已存在于 DOM 中。否则首次无障碍树构建时，关联静默失败，后续即使 DOM 补全也无自动重连。 <p>关键检查点：</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill7761" title="Article To Html"><img src="https://img.php.cn/upload/skill/000/000/081/179168408018805.jpg" alt="Article To Html" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill7761" title="Article To Html" class="overflowclass">Article To Html</a> <p class="overflowclass">文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。</p> </div> <a rel="nofollow" href="/xiazai/skill7761" title="Article To Html" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <ul><li>子表格整个 HTML 字符串插入 <code><td> 前，是否已包含完整 <code><thead> 和带 id 的 <code><th>？ <li>用 <code>innerHTML 直接写入时，浏览器会同步解析并挂载所有节点；但若分步 appendChild，需手动控制顺序

React/Vue 等框架中，确保子表格组件的 <th> 在首次 render 时就带正确 id，不要依赖 useEffect 或 nextTick 延迟设置 <li>调试时用 <code>document.querySelectorAll('table.detail-table th[id]') 确认子表 th 的 id 是否真实存在且拼写一致

headers 绑定失效时，最常被忽略的其实是空格和大小写

哪怕 DOM 结构完全正确，一个空格或一个大写字母就能让整个 headers 失效——而且没有任何报错提示，屏幕阅读器只会安静地跳过语义关联。

务必逐项核对：

• <th id="Q1"> 和 <code><td headers="q1"> → 大小写不一致，匹配失败 <li><code><th id="q1 sales"> → id 含空格，浏览器根本不注册这个 id，<code>getElementById("q1 sales") 返回 null
• <td headers="q1, q2"> → 逗号不是分隔符，整个字符串被当做一个 id 查找 <li><code><td headers=" q1 q2 "> → 首尾空格不影响，但中间多个空格会被压缩为单个，实际等价于 <code>"q1 q2"，没问题

  真正容易被跳过的细节是：headers 不是“写了就绑定”，它依赖 DOM 中真实存在的、大小写精确、不含非法字符、且在同一 table 范围内的 id —— 少一个条件，就彻底断链。

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