合并单元格需用rowspan（跨行）和colspan（跨列），均写在或内；rowspan="n"要求后续n−1行同列位置彻底删除/，colspan="m"仅影响当前行；二者可共用，但须注意语义、动态生成逻辑及css兼容性。
直接说结论：合并行用 rowspan，合并列用 colspan，两者都必须写在 <td> 或 <code><th> 标签里，且后续对应位置的单元格要主动「不写」，否则表格会错位。
<h3>rowspan="N" 怎么写才让单元格真正跨 N 行</h3>
<p>它不是“拉伸”当前单元格，而是告诉浏览器：“这个单元格占满当前行 + 接下来 N−1 行的同一列位置”。所以关键动作是：在接下来的 N−1 行中，那一列的位置必须完全不出现 <code><td> 或 <code><th>。
<ul><li>写 <code>rowspan="3" 后，后面两行同一列不能再有 <td> —— 不是设为空、不是加 <code> ，是彻底删掉那两个标签
rowspan="4"，且第 2、3、4 行的第一个位置都不写 <td>
<li>常见错误：写了 <code>rowspan="2"，但第二行还留着一个 <td>，结果渲染出两列错位，甚至文字被遮盖
<li>注意 <code>border-collapse: collapse 必须加在 CSS 里，否则跨行单元格上下边框会重复显示，看起来像加粗或断开colspan="M" 合并同一行里的多个列
colspan 比 rowspan 直观：它只影响当前这一行，把 M 个横向相邻的单元格“压成一个”。不需要删其他行的任何东西，只要保证当前行总 <td> 数量对得上即可。
<ul><li>一行原本该有 5 个 <code><td>，若第一个写 <code>colspan="2"，那这一行只需再写 4 个单元格（因为第一个已占两列），总数仍是 5 列
rowspan 同时用，但要注意：先按 rowspan 留出纵向空间，再在剩余列里用 colspan 布局横向跨度<th> 乱用 <code>colspan 却不配 scope 属性——屏幕阅读器可能无法正确关联表头与数据单元格
动态生成表格时，rowspan 容易漏掉什么逻辑
服务端模板或前端 JS 拼接表格时，不能靠“值相等就合并”，必须满足两个条件：值相同 + 行连续。否则会跨组合并，破坏语义。
- 统计逻辑要从第一行开始遍历，遇到相同值就计数；一旦值变化，就把计数写进第一行的
rowspan，然后重置计数器 - Vue/React 中别在
v-for或map里临时判断是否渲染某列 —— 容易漏掉“该跳过”的<td>，导致 DOM 多出一列 <li>JS 动态改 <code>rowspan属性后，浏览器不会自动删掉已被跨过的<td>，必须手动 <code>remove()对应节点，否则视觉重复 - 如果用了
display: grid或flex模拟表格布局，rowspan和colspan完全无效 —— 它们只在原生<table> 结构中起作用 <p>最常被忽略的一点：合并后的单元格仍参与表格列宽计算，但内容垂直居中默认依赖 <code>vertical-align: middle；如果设了top或bottom，多行合并后文字会贴顶或悬空，看起来像没对齐。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
