rowspan必须写在起始行的<td>或<th>标签内，向下跨N行占位，被跨行列必须彻底省略对应<td>标签，且N不得超过当前行至表格末尾的剩余行数。
rowspan 属性写在哪个 <td> 里才生效
rowspan 必须写在**要跨行的那个单元格起始的 <td> 标签内**，而不是它下面那些“被跨过”的单元格。浏览器会自动跳过后续行中对应列的位置，不会渲染重复内容。
常见错误是把 rowspan="2" 写在第二行的 <td> 里，结果毫无效果——因为跨行必须从“源头”声明。
- 正确：第一行第一列的
<td rowspan="2">姓名</td> - 错误：第二行第一列的
<td rowspan="2">张三</td>（此时已晚，上一行该列已被占满） - 注意：被跨过的行中，对应列位置**不要放任何
<td>或<th>**，否则会错位或撑开多余列
rowspan 和 colspan 同时用会不会冲突
不会冲突，但顺序和位置必须严格对齐。一个单元格可以同时设 rowspan 和 colspan，比如 <td rowspan="2" colspan="3">汇总</td>，表示它横跨 2 行、3 列。
关键约束是：这个单元格所覆盖的所有行列格子，在后续行中都不得再出现 <td> 占位，否则表格结构会断裂。
立即学习“前端免费学习笔记（深入）”；
- 如果某行已有
<td colspan="3">，下一行又想用rowspan="2"起头，需确保列总数一致，否则<tr>实际列数会计算错误 - 浏览器按 HTML 源码顺序逐行解析，
rowspan的“占用”是向下行延伸，不向上影响 - 调试技巧：用浏览器开发者工具检查
<tr>下实际渲染的<td>数量，比肉眼数更可靠
rowspan 导致表格错位的典型原因
错位几乎都源于“隐性列数不一致”——表面看每行 <td> 个数差不多，但 rowspan 和 colspan 改变了每行的实际有效列宽。
例如第一行：<td rowspan="2">A</td><td>B</td><td>C</td>（共 3 列宽度）；第二行：<td>D</td><td>E</td>（仅 2 列），就会让 E 跑到 C 下方，而 D 实际在 A 的“空出位置”下方，视觉上列头偏移。
- 解决办法：用开发者工具的“元素”面板查看每个
<tr>渲染后的实际单元格分布，而非源码 - 避免混合使用大
rowspan和小colspan在相邻行，尤其在表头区域 - 复杂合并建议先手绘网格草图，标出每个
<td>的rowspan/colspan值再写代码
Vue/React 等框架里动态生成 rowspan 容易漏什么
动态渲染时，rowspan 值必须是**数字类型**，字符串如 "2" 多数情况下能工作，但某些 SSR 或严格模式下会失效；更危险的是逻辑算错导致 rowspan="0" 或负值，浏览器可能忽略或行为异常。
另一个常被忽略的点：key 的设置。如果合并单元格依赖数据分组（比如按 category 合并），但 v-for 或 map 的 key 没包含分组信息，列表重排时 rowspan 可能套错行。
- Vue 示例：
<td :rowspan="groupSpan[item.category]">{{ item.category }}</td>，确保groupSpan是预计算好的对象，而非每次渲染实时filter().length - React 中若用
rowSpan（注意 React 属性名是驼峰），别忘了它是 DOM 属性，不是普通 props - 服务端渲染时，
rowspan计算必须与客户端完全一致，否则 hydration 会报 mismatch
rowspan 的计算链断裂。上线前务必用不同数据量（尤其是边界值：空组、单条、超长组）跑一遍表格渲染。 
