scope属性是屏幕阅读器识别表头管辖范围的唯一依据；必须为<thead>中列标题设scope="col"、<tbody>每行首个<th>设scope="row"，带rowspan/colspan的<th>须显式声明，复杂结构须改用headers+id绑定。

scope属性是屏幕阅读器识别表头管辖范围的唯一依据

没设 scope，屏幕阅读器就只能靠 DOM 位置硬猜——它不报错，但用户听到的是错的归属关系。比如读到“92”，却报不出“这是数学成绩”，而是报成“张三|92”，因为没声明 scope="col"，它把第一列的 <th>张三 当成了整行的标题。<h3>哪些场景必须显式写 scope="col" 或 scope="row"</h3> <ul><li><code><thead> 里的每个 <code><th>（如“姓名”“年龄”）→ 必须设 <code>scope="col"

<tbody> 每行第一个 <code><th>（如“张三”“李四”）→ 必须设 <code>scope="row"

哪怕只有一行表头、两列数据，只要用了 rowspan="2" 的 <th>，也必须补 <code>scope="col"，否则第二行数据可能被错误归到第一行标题下

动态生成时别只看 i === 0 就统一加 scope="row"；得区分当前循环的是列头还是行头

scope="colgroup" 和 scope="rowgroup" 不是高级选项，而是结构契约

scope="colgroup" 必须配合真实存在的 <colgroup></colgroup> 才生效，否则旧版 JAWS 可能直接跳过整组列；scope="rowgroup" 必须位于 <tbody> 或 <code><thead> 内部，且该 <code><th> 是整个分组的总标题（如“高优先级订单”统管下面 5 行）。没有 <code><colgroup></colgroup> 却写 scope="colgroup"，等于给屏幕阅读器发了无效指令。

当 scope 失效时，headers + id 是唯一兜底手段

scope 不支持多值，左上角单元格既要管行又要管列？硬写 scope="row col" 是非法语法，浏览器会忽略整个属性。此时必须弃用 scope，改用：
- 给列头加 id="month"，行头加 id="product"
- 数据单元格写 <td headers="month product">1200</td>（注意：空格分隔，不是逗号）<br> - <code>headers 优先级永远高于 scope，一旦出现，scope 被彻底绕过

真正难的不是查文档写对 scope，而是在每次写 <th> 时下意识问一句：“它管的是上面一列，还是左边一行？”——这个条件反射比任何自动检测工具都管用。</th>

Html To Pdf

使用 Puppeteer + Chrome 将 HTML 渲染为中文 PDF，自动处理图表等待、Tab 展开、动画、测高、白边消除、防分页，适用于看板、报表、网页和交互图表转 PDF。

下载