scope="row" 是行首表头的语义标识，专用于告知屏幕阅读器该 管理同 内其后所有 ，不可用 加 css 替代，否则破坏可访问性；其作用范围限于当前行内后续 ，不跨行生效；动态渲染时需警惕循环层级误判、首行误用及合并单元格漏设，左上角空 禁用 scope。
scope="row" 是行首表头的语义身份证
它不是样式开关，而是告诉屏幕阅读器：“这个 <th> 管它右边同 <code><tr> 里的所有 <code><td>”。没有它，视障用户听到的只是“32、北京、2024-06-01”，而不是“张三，年龄：32，城市：北京，下单时间：2024-06-01”。
<h3>为什么不能用 <code><td> + CSS 模拟行首标题？
<p>视觉上加粗居中看不出区别，但语义断裂严重：</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill3458" title="html-ppt-to-pdf"><img
src="https://img.php.cn/upload/skill/000/000/081/178956546773641.jpg" alt="html-ppt-to-pdf" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill3458" title="html-ppt-to-pdf" class="overflowclass">html-ppt-to-pdf</a>
<p class="overflowclass">将使用 `<section class="slide">` 约定的 HTML 幻灯片转换为高保真、矢量文本 PDF（使用 Playwright + Chromium 原生 PDF 功能）。</p>
</div>
<a rel="nofollow" href="/xiazai/skill3458" title="html-ppt-to-pdf" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>
<ul><li><code><td> 永远被读作“数据”，哪怕内容是“张三”
<li>屏幕阅读器不会把它和右侧数据自动关联，缺失“行维度”的上下文</li>
<li>WCAG 2.1 AA 级别直接判定为可访问性缺陷</li>
<li>部分旧版 JAWS 甚至跳过整行，只报数值</li>
<h3>scope="row" 的实际生效边界在哪？</h3>
<p>它只作用于当前 <code><tr> 内、该 <code><th> 之后的所有 <code><td>（直到下一个 <code><th scope="row"> 或行尾）：
<ul><li>同一行里，<code><th scope="row">张三</th>
<td>32</td>
<td>北京</td> → “张三”管这两个 <td>
<li>如果中间插了另一个 <code><th scope="row">李四</th>，则后续 <td> 归李四管
<li>它不跨 <code><tr> 生效——第二行的 <code><th scope="row"> 必须重新声明
<h3>动态渲染时最容易错的三件事</h3>
<p>模板循环中写 <code>scope="row" 不等于万事大吉：
- 误判循环层级：在列循环里给每个
<th> 都加 <code>scope="row"（其实该是scope="col"） - 忽略首行：以为只有
<tbody> 里才需要，结果 <code><thead> 第一列也用了 <code>scope="row"，导致列标题被误读为行标题 - 合并单元格漏设：带
rowspan="2"的行首<th>，不加 <code>scope="row"，第二行数据就失去行归属 左上角那个空<th>（第1行第1列）永远不要加 <code>scope="row"或scope="col"——它既不单管行也不单管列，硬加反而让辅助技术困惑。真要表达双重含义，得用headers+id显式绑定。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
