rowspan必须写在起始行单元格中，仅对该单元格生效并向下跨行；被跨行对应列须完全省略td/th，不可留空或写空标签；动态渲染需先聚合分组数据再统一设置rowspan值。
rowspan必须写在起始行的或
上，不能“哪一行加都行”
rowspan 只对它所在的那个单元格生效，并向下锁定列位置。比如你要让“部门”这个表头跨 3 行，就得把 rowspan="3" 写在第一行的 <th rowspan="3">部门</th> 里，而不是第二行或第三行。
常见错误是把它写在最后一行——结果只显示单行高度，因为没剩余行可跨。
值也不能乱填：rowspan="999" 在 Chrome/Firefox 中可能勉强撑开，但在 IE 或某些解析器里会出错，甚至导致整行 tr.cells.length 计算异常。
被跨过的行必须彻底省略对应列的或
，不是留空也不是写空标签
这是最常翻车的地方。
✅ 正确：第二、三行中，该列整个 <td> 元素都不出现<br>
❌ 错误：写成 <code><td></td> 或 <td> —— 空标签仍占位，会把右侧内容整体右推，列对不齐 <p>举个例子：<br>
第一行：<code><th rowspan="3">部门</th>
<th>姓名</th>
第二行：<th>张三</th> ← 这里不能有第一个 <th>
<br>
第三行：<code><th>李四</th> ← 同理，跳过部门列
动态生成时尤其要注意：JS 拼接或 React 的 map 渲染里，得用条件判断跳过该列，而不是渲染一个空 <td>。<h3>动态计算rowspan值必须提前聚合数据，不能边遍历边判断
</h3>
<p>React/Vue/服务端模板里，如果直接在循环中用 <code>if (data[i].label === data[i-1].label) 判断是否合并，大概率出错——因为相邻值相等 ≠ 属于同一组（中间可能插了其他 label）。
正确做法是两步走：
- 先用
reduce 统计每组连续重复值的行数，生成类似 { '技术部': 2, '市场部': 3 } 的映射
- 渲染时，仅在每组第一条数据上写
rowspan={numRows}，其余同组行直接 omit 该列
注意：React 中不要在 map 闭包里维护 isFirstRow 状态变量，而应在每个分组作用域内重置，否则跨组污染。
立即学习“前端免费学习笔记（深入）”；
rowspan对可访问性和JS DOM操作有隐性影响
屏幕阅读器往往无法正确关联被 rowspan 跨过的单元格和表头，尤其当 <th scope="row"> 和 <code><th scope="col"> 混用时，语义链容易断裂。 <p>JS 读取表格结构时：<code>table.rows[1].cells[0] 不一定对应视觉上的第一列——如果第一行用了 rowspan="3"，那第二、三行的 cells 长度会少 1，索引直接偏移。
调试时建议打开开发者工具，看 Layout 面板是否有 “Collapsed cells” 警告；也可打印每行的 cells.length，确认是否连续。
复杂表头优先考虑用 <thead> + <code>headers 属性显式绑定，而不是靠视觉合并硬扛。
rowspan 只对它所在的那个单元格生效，并向下锁定列位置。比如你要让“部门”这个表头跨 3 行，就得把 rowspan="3" 写在第一行的 <th rowspan="3">部门</th> 里，而不是第二行或第三行。
常见错误是把它写在最后一行——结果只显示单行高度，因为没剩余行可跨。
值也不能乱填：rowspan="999" 在 Chrome/Firefox 中可能勉强撑开，但在 IE 或某些解析器里会出错，甚至导致整行 tr.cells.length 计算异常。
被跨过的行必须彻底省略对应列的或
，不是留空也不是写空标签
这是最常翻车的地方。
✅ 正确：第二、三行中，该列整个 <td> 元素都不出现<br>
❌ 错误：写成 <code><td></td> 或 <td> —— 空标签仍占位，会把右侧内容整体右推，列对不齐 <p>举个例子：<br>
第一行：<code><th rowspan="3">部门</th>
<th>姓名</th>
第二行：<th>张三</th> ← 这里不能有第一个 <th>
<br>
第三行：<code><th>李四</th> ← 同理，跳过部门列
动态生成时尤其要注意：JS 拼接或 React 的 map 渲染里，得用条件判断跳过该列，而不是渲染一个空 <td>。<h3>动态计算rowspan值必须提前聚合数据，不能边遍历边判断
</h3>
<p>React/Vue/服务端模板里，如果直接在循环中用 <code>if (data[i].label === data[i-1].label) 判断是否合并，大概率出错——因为相邻值相等 ≠ 属于同一组（中间可能插了其他 label）。
正确做法是两步走：
- 先用
reduce 统计每组连续重复值的行数，生成类似 { '技术部': 2, '市场部': 3 } 的映射
- 渲染时，仅在每组第一条数据上写
rowspan={numRows}，其余同组行直接 omit 该列
注意：React 中不要在 map 闭包里维护 isFirstRow 状态变量，而应在每个分组作用域内重置，否则跨组污染。
立即学习“前端免费学习笔记（深入）”；
rowspan对可访问性和JS DOM操作有隐性影响
屏幕阅读器往往无法正确关联被 rowspan 跨过的单元格和表头，尤其当 <th scope="row"> 和 <code><th scope="col"> 混用时，语义链容易断裂。 <p>JS 读取表格结构时：<code>table.rows[1].cells[0] 不一定对应视觉上的第一列——如果第一行用了 rowspan="3"，那第二、三行的 cells 长度会少 1，索引直接偏移。
调试时建议打开开发者工具，看 Layout 面板是否有 “Collapsed cells” 警告；也可打印每行的 cells.length，确认是否连续。
复杂表头优先考虑用 <thead> + <code>headers 属性显式绑定，而不是靠视觉合并硬扛。
这是最常翻车的地方。
✅ 正确：第二、三行中，该列整个 <td> 元素都不出现<br>
❌ 错误：写成 <code><td></td> 或 <td> —— 空标签仍占位，会把右侧内容整体右推，列对不齐 <p>举个例子：<br>
第一行：<code><th rowspan="3">部门</th>
<th>姓名</th>
第二行：<th>张三</th> ← 这里不能有第一个 <th>
<br>
第三行：<code><th>李四</th> ← 同理，跳过部门列
动态生成时尤其要注意：JS 拼接或 React 的 map 渲染里，得用条件判断跳过该列，而不是渲染一个空 <td>。<h3>动态计算rowspan值必须提前聚合数据，不能边遍历边判断
</h3>
<p>React/Vue/服务端模板里，如果直接在循环中用 <code>if (data[i].label === data[i-1].label) 判断是否合并，大概率出错——因为相邻值相等 ≠ 属于同一组（中间可能插了其他 label）。
正确做法是两步走：
- 先用
reduce统计每组连续重复值的行数，生成类似{ '技术部': 2, '市场部': 3 }的映射 - 渲染时，仅在每组第一条数据上写
rowspan={numRows}，其余同组行直接 omit 该列
注意：React 中不要在 map 闭包里维护 isFirstRow 状态变量，而应在每个分组作用域内重置，否则跨组污染。
立即学习“前端免费学习笔记（深入）”；
rowspan对可访问性和JS DOM操作有隐性影响
屏幕阅读器往往无法正确关联被 rowspan 跨过的单元格和表头，尤其当 <th scope="row"> 和 <code><th scope="col"> 混用时，语义链容易断裂。 <p>JS 读取表格结构时：<code>table.rows[1].cells[0] 不一定对应视觉上的第一列——如果第一行用了 rowspan="3"，那第二、三行的 cells 长度会少 1，索引直接偏移。
调试时建议打开开发者工具，看 Layout 面板是否有 “Collapsed cells” 警告；也可打印每行的 cells.length，确认是否连续。
复杂表头优先考虑用 <thead> + <code>headers 属性显式绑定，而不是靠视觉合并硬扛。
