role="rowgroup"不能加在上，因为它仅适用于aria表格（如），而原生中应使用进行语义化分组，否则会导致屏幕阅读器混淆和浏览器警告。
role="rowgroup" 不是用来“对表格行进行逻辑分组”的——它只是 ARIA 角色，不能替代语义化 HTML 结构，也不能改变表格的 DOM 层级或渲染行为。
为什么 role="rowgroup" 不能直接加在 <tr> 上
<p>ARIA 的 <code>role="rowgroup" 是为那些无法用标准 HTML 表格元素（如 <thead>、<code><tbody>、<code><tfoot>）表达结构的场景准备的，比如用 <code><div> 模拟表格时。但如果你已经用了真实的 <code><table>，浏览器和辅助技术会优先信任原生语义，忽略或报错你强行给 <code><tr> 加的 <code>role="rowgroup"。
- 给
<tr> 加 <code>role="rowgroup" 会导致屏幕阅读器混淆：它期望 rowgroup 是 <tbody> 这类容器，而不是单行
<li>Chrome 和 Firefox 会发出控制台警告：<code>The ARIA role 'rowgroup' is not allowed on a 'tr' element
- 即使不报错，NVDA/JAWS 也不会按你设想的方式朗读——它仍把该
<tr> 当作普通行处理
<h3>真正起作用的分组方式只有 <code><thead>、<code><tbody>、<code><tfoot><p>这些是 HTML 原生的行组容器，既影响样式（比如 <code><tbody> 可单独滚动），也明确告诉辅助技术“这里是一组数据行”。它们才是逻辑分组的正确载体。
<ul><li><code><thead> 必须包含表头行（<code><tr> 中含 <code><th>），且只能出现一次
<li><code><tbody> 可以有多个，每个都代表一个逻辑数据块；例如按状态分组：<code><tbody class="status-active"> 和 <code><tbody class="status-inactive"><li>多个 <code><tbody> 之间可插入 <code><caption></caption> 或空行视觉分隔，但不要用 <tr><td colspan="100%"></td></tr> 伪装分组——那只是视觉 hack，无语义
如果必须用 ARIA 模拟分组（比如非 table 元素）
只有当你放弃 <table>、改用 <code><div role="table"> 等完全 ARIA 驱动的方案时，<code>role="rowgroup" 才有意义。此时它必须作为 <div role="rowgroup"> 出现，且直接包裹若干 <code><div role="row">。
<pre class="brush:php;toolbar:false;"><div role="table">
<div role="rowgroup">
<div role="row">
<div role="columnheader">Name</div>
<div role="columnheader">Age</div>
</div>
</div>
<div role="rowgroup">
<div role="row">
<div role="cell">Alice</div>
<div role="cell">32</div>
</div>
</div>
</div></pre>
<p>注意：这种写法需手动维护所有 ARIA 属性（<code>aria-rowindex、aria-colindex、aria-labelledby 等），且键盘导航、焦点管理、响应式适配全得自己实现——成本远高于用原生 <tbody>。
<p>真正需要逻辑分组时，别碰 <code>role="rowgroup" 在 <tr> 上的用法。多一个 <code><tbody>，比加十个 ARIA 属性更可靠、更轻量、更少出错。</tbody>
<tr> 加 <code>role="rowgroup" 会导致屏幕阅读器混淆：它期望 rowgroup 是 <tbody> 这类容器，而不是单行
<li>Chrome 和 Firefox 会发出控制台警告：<code>The ARIA role 'rowgroup' is not allowed on a 'tr' element
<tr> 当作普通行处理
<h3>真正起作用的分组方式只有 <code><thead>、<code><tbody>、<code><tfoot><p>这些是 HTML 原生的行组容器，既影响样式（比如 <code><tbody> 可单独滚动），也明确告诉辅助技术“这里是一组数据行”。它们才是逻辑分组的正确载体。
<ul><li><code><thead> 必须包含表头行（<code><tr> 中含 <code><th>），且只能出现一次
<li><code><tbody> 可以有多个，每个都代表一个逻辑数据块；例如按状态分组：<code><tbody class="status-active"> 和 <code><tbody class="status-inactive"><li>多个 <code><tbody> 之间可插入 <code><caption></caption> 或空行视觉分隔，但不要用 <tr><td colspan="100%"></td></tr> 伪装分组——那只是视觉 hack，无语义
如果必须用 ARIA 模拟分组（比如非 table 元素）
只有当你放弃 <table>、改用 <code><div role="table"> 等完全 ARIA 驱动的方案时，<code>role="rowgroup" 才有意义。此时它必须作为 <div role="rowgroup"> 出现，且直接包裹若干 <code><div role="row">。
<pre class="brush:php;toolbar:false;"><div role="table">
<div role="rowgroup">
<div role="row">
<div role="columnheader">Name</div>
<div role="columnheader">Age</div>
</div>
</div>
<div role="rowgroup">
<div role="row">
<div role="cell">Alice</div>
<div role="cell">32</div>
</div>
</div>
</div></pre>
<p>注意：这种写法需手动维护所有 ARIA 属性（<code>aria-rowindex、aria-colindex、aria-labelledby 等），且键盘导航、焦点管理、响应式适配全得自己实现——成本远高于用原生 <tbody>。
<p>真正需要逻辑分组时，别碰 <code>role="rowgroup" 在 <tr> 上的用法。多一个 <code><tbody>，比加十个 ARIA 属性更可靠、更轻量、更少出错。</tbody>
