不能只靠colspan/rowspan做多级分组，因屏幕阅读器无法识别跨区块语义关联，且JS操作和导出易失控；应拆为多个语义独立的table，每表配caption、section包裹及aria-labelledby，并用嵌套thead实现稳健分组表头。
为什么不能只靠 colspan 和 rowspan 做多级分组
视觉上用 <th colspan="4">住院费用</th> 拉出一个大标题，屏幕阅读器根本不知道它管下面哪几行——scope 属性只支持单层行/列归属，跨区块后就断联。用户听到“第一行：Medicare pays”，却没上下文提示这是“住院费用”下的数据，直接迷失。更麻烦的是，这类结构一旦要加筛选、导出或响应式折叠，JS 逻辑会迅速失控。
把一个大表拆成多个独立 <table> 的实操要点
<p>这不是“偷懒切块”，而是按语义边界重构：每个业务分区（如“住院费用”“护理机构”）本身就是一个完整数据集，理应拥有自己的 <code><caption></caption>、<thead> 和可独立操作的 DOM 节点。
<ul>
<li>
<code><section></section> 必须包裹每个子表，并用 aria-labelledby 指向内部 <h2></h2>，否则屏幕阅读器无法识别这是独立导航地标
<caption></caption> 放在每个 <table> 内部最开头，不能塞进 <code><thead> 或用 CSS 模拟——这是唯一被所有辅助技术识别的原生标题机制
<li>各子表之间保留足够视觉间距（比如 <code>margin-bottom: 1.5rem），避免被误读为同一张表的断裂<div role="region" aria-label="Total summary"> 包裹
<h3>合并单元格的替代方案：用嵌套 <code><thead> 实现分组表头
<p>当真需要“产品大类 → 子类 → 具体型号”三级表头时，<code>colspan 容易让列对齐错乱、导出 Excel 时列偏移。更稳的方式是放弃单层 <thead>，改用两层：
<pre class="brush:php;toolbar:false;"><thead>
<tr>
<th colspan="3">硬件设备</th>
<th colspan="2">软件服务</th>
</tr>
<tr>
<th>服务器</th>
<th>存储</th>
<th>网络</th>
<th>License</th>
<th>Support</th>
</tr>
</thead></pre>
<p>关键点：<br>第一行 <code><th> 用 <code>colspan 声明分组范围，第二行用普通 <th> 对齐列数；两行都必须存在，且列总数一致，否则 <code>scope="col" 绑定会失效。立即学习“前端免费学习笔记（深入）”；
删掉旧结构前必须验证的三件事
重构不是删代码，是换语义锚点。动手前确认：
- 原表格是否有 JS 依赖
document.querySelectorAll('table tr')这类全局选择器？如果有，得同步更新为按section作用域查，比如section#sec-hospital table tr - 导出功能是否硬编码了列索引（如第 0 列是“姓名”）？拆表后每张子表列结构可能不同，需改用表头文本匹配而非位置索引
- CSS 是否用了
table + table或tr:nth-child(odd)这类跨表样式？这些规则在拆分后会失效，得补上明确 class 或改用:has()（注意兼容性）
最常被跳过的环节是导出逻辑适配——结构看着清爽了，但用户点“导出Excel”发现只导出了第一张子表，问题就出在这儿。
