rowspan动态计算必须预先分组处理，不能在map中直接判断；需用reduce等预统计每组行数，仅首行渲染带rowspan的单元格，后续行完全跳过该列，严禁跨语义分区或导出时依赖原生rowspan。
rowspan动态计算必须提前分组，不能边遍历边判断
React/Vue等框架里直接在map()里写rowspan，几乎必然出错。因为数据索引是全局的，而跨行逻辑依赖“同一组内第几行”这个局部状态。比如按部门分组，每个部门有3条记录，你得让第一行的<td rowspan="3">生效，后两行则跳过该列——但<code>data.map((item, i) => ...)里的i不反映分组位置。
- 必须先用
reduce()或groupBy()预处理：统计每组行数，生成类似{ '研发部': 3, '测试部': 2 }的对象 - 外层循环用
Object.keys(groups).map(label => ...)，确保顺序可控 - 内层对每组数据调用
groupData.map((row, idx) => { const isFirst = idx === 0; ... })，只在isFirst为true时渲染带rowspan的<td> <li>切勿在闭包中缓存上一次的<code>label来判断是否“换组”，异步更新或重排序会立刻导致错位 - 正确做法：在JSX或模板中用条件判断跳过整个
<td>标签，例如<code>{idx === 0 && <td rowspan="{count}">{label}</td>}，后两行该位置不渲染任何<td> <li>错误写法：<code><td>{idx === 0 ? label : ''}</td>——这仍然占了一列，破坏网格结构 - 验证方法：打开开发者工具，选中带
rowspan的<td>，看它是否真的包裹了下方多行区域；若只高亮单行，说明后续行没跳过 <h3>跨<thead>和</thead> <tbody>的rowspan浏览器根本不认 <p>HTML规范明确禁止<code>rowspan跨越语义分区。把<th rowspan="4">写在<code><thead>里，指望它盖住<code><tbody>里的3行？所有主流浏览器都会忽略该属性，或渲染错乱。这不是兼容性问题，是语法无效。 <ul><li>解决方案一：放弃<code><thead>/</thead> <tbody>分区，整个表格用单个<code><tbody>，靠CSS区分表头样式（如<code>tbody > tr:first-child） - 解决方案二：改用
display: grid模拟表格外观，用grid-row: span 4实现真正跨区合并，同时保持无障碍语义（需配role="table"等ARIA属性） - 特别注意：即使视觉上看起来“成功”，屏幕阅读器仍可能无法将跨区单元格与对应数据行关联，影响可访问性
- 导出前主动降级：用JS遍历表格，对每个带
rowspan的单元格，向下填充相同内容到后续行，并移除rowspan属性，还原为普通表格 - 若必须保留合并效果，限制
rowspan只用于首行内部（即仅横向colspan，禁用纵向跨行），再配合加粗+底纹模拟标题合并 - Word中手动修复：选中整行 → 表格属性 → 勾选“允许跨页断行”，然后全选表格 → 边框设置 → 重新应用所有框线
被跨行的列必须彻底省略，不是留空也不是写<td></td>
这是最常被忽略的结构性前提。浏览器解析rowspan="3"时，会自动跳过接下来2行同一列的位置；如果那两行仍写了<td>（哪怕内容为空），就等于强行插入额外单元格，整行列数膨胀，后续所有<code>tr.cells[i]读取都会错位，CSS选择器也会失效。
打印/导出PDF时rowspan断裂，本质是Word不支持该语义
从网页复制表格到Word，或用某些库导出PDF，rowspan经常断开、边框消失。这不是你的HTML写错了，而是Word和部分PDF引擎把rowspan当视觉装饰处理，跨页时无法维持结构完整性。
立即学习“前端免费学习笔记（深入）”；
rowspan真正难的不是怎么写，而是怎么让结构“稳住”——它要求你放弃“视觉拉伸”的直觉，转而像数据库建模一样，预先声明网格空间并严格守恒每行列数。一旦漏掉某一行的省略逻辑，或者试图跨语义边界，后面所有布局都会连锁崩塌。
