headers属性在嵌套表格中仅限当前table内生效，不跨表、不穿透、不继承；子表th的id只能被子表td引用，父表td只能引用父表th，且id须大小写精确、无空格、同表存在。
headers属性在嵌套表格里根本不会跨层生效
你写的 <td headers="name"> 永远只会在**当前 <code><table> 内部**查找 id="name" 的 <th>，哪怕子表格嵌在 <td> 里，它的 <th> 对父表的 <td> 来说完全不可见。这不是 bug，是规范强制限定：headers 只认同级 table 下的 id，不支持跨 table、不穿透嵌套、不继承父级上下文。
常见错误现象：
- 父表
<td headers="q1">显示空白关联 → 实际是因为子表格里的<th id="q1">不在同一个<table>节点下 - DevTools Accessibility 面板里 “Related headers” 列为空 → 表明没找到匹配的 id，不是读屏器问题，是 DOM 范围不对
- 用 JavaScript 手动查
document.getElementById("q1")能拿到元素，但td.headers仍不生效 → 因为该<th>属于另一个 table，不在 headers 的搜索域内
深层嵌套时，headers 必须按“表级隔离”单独定义
每个 <table> 都是独立的语义单元。子表格里的数据单元格，只能引用**自己所在 table 内**的 <th id="xxx">；父表格里的数据单元格，也只能引用父 table 自己的 <th>。两者不能混用，也不需要混用。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给每个嵌套层级的
<table>单独命名 class（如class="sales-summary"、class="sales-detail"），避免 id 冲突 - 子表格的
<th>必须带id，且该 id **只供子表格内部的<td>使用**，例如：<th id="product-name">→<td headers="product-name"> - 父表格中如果某个
<td>本身要承载子表格，它不需要 headers —— 它的语义由父表自身表头定义；子表格的语义由它自己的 headers 定义 - 不要试图用一个 headers 同时指向父表和子表的 th —— 浏览器直接忽略，因为至少一半 id 找不到
动态渲染嵌套表格时，id 挂载顺序决定 headers 是否可用
如果你用 JS 动态生成子表格，必须确保：子表格的 <th id="xxx"> 在子表格的 <td headers="xxx"> 渲染前已存在于 DOM 中。否则首次无障碍树构建时，关联静默失败，后续即使 DOM 补全也无自动重连。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
关键检查点：
- 子表格整个 HTML 字符串插入
<td>前，是否已包含完整<thead>和带 id 的<th>？ - 用
innerHTML直接写入时，浏览器会同步解析并挂载所有节点；但若分步 appendChild，需手动控制顺序 - React/Vue 等框架中，确保子表格组件的
<th>在首次 render 时就带正确 id，不要依赖 useEffect 或 nextTick 延迟设置 - 调试时用
document.querySelectorAll('table.detail-table th[id]')确认子表 th 的 id 是否真实存在且拼写一致
headers 绑定失效时，最常被忽略的其实是空格和大小写
哪怕 DOM 结构完全正确，一个空格或一个大写字母就能让整个 headers 失效——而且没有任何报错提示，屏幕阅读器只会安静地跳过语义关联。
务必逐项核对：
-
<th id="Q1">和<td headers="q1">→ 大小写不一致，匹配失败 -
<th id="q1 sales">→ id 含空格，浏览器根本不注册这个 id，getElementById("q1 sales")返回 null -
<td headers="q1, q2">→ 逗号不是分隔符，整个字符串被当做一个 id 查找 -
<td headers=" q1 q2 ">→ 首尾空格不影响，但中间多个空格会被压缩为单个，实际等价于"q1 q2"，没问题
真正容易被跳过的细节是：headers 不是“写了就绑定”，它依赖 DOM 中真实存在的、大小写精确、不含非法字符、且在同一 table 范围内的 id —— 少一个条件，就彻底断链。
