rowspan必须写在合并区域的首行单元格中，向下占用对应列位置，后续行该列需完全省略，否则会导致表格结构错乱。
rowspan必须写在起始行的或
上
合并三行，不是随便哪一行加rowspan="3"都行——它只对当前单元格生效，并向下“锁定”对应列位置。比如你要让“张老师”覆盖第1、2、3行的第一列，就得把rowspan="3"写在第1行的<td rowspan="3">张老师</td>里，而不是第2行或第3行。
- 写在最后一行？浏览器没后续行可跨，
rowspan直接被忽略，看起来毫无效果
- 值超过剩余行数（比如只剩2行却写
rowspan="4"），会导致DOM结构异常，tr.children.length可能不一致
- rowspan本质是“占位”，不是“拉高”，它不改变当前单元格渲染高度，只是告诉浏览器：“下面n−1行，这个列位置你别再画
了”
被跨过的行必须彻底删掉对应，不能留空
这是最常踩的坑：有人以为第二行第一列“没内容”，就写个<td></td>占位，结果整张表向右偏移一列。浏览器会把它当真实单元格渲染，导致列数膨胀。
- ✅ 正确：第1行有
<td rowspan="3">张老师</td>，第2、3行同一列**完全不写或
**
- ❌ 错误：
<td></td>、<td> 、甚至<code><td style="display:none">——只要DOM里存在该元素，就算占位
<li>验证方法：用<code>document.querySelectorAll('tr')[1].children.length对比第0行，若不等，说明结构已错
动态生成时得先统计连续重复行数
服务端模板或JS拼接表格时，不能靠“看到相同值就加rowspan”，必须确认是否相邻且连续。中间断开，就得重置计数。
- 只在重复块的**第一行**设置
rowspan，后续同组行对应列直接omit（不生成任何）
- Vue/React中别在v-for或map里用
v-if控制显示——容易漏掉本该删除的，建议提前聚合数据，生成带rowspan字段的结构化数组
- Node.js模板引擎（如EJS）中，需用变量缓存上一行值+计数器，判断是否为新组起点
colspan和rowspan混用时，行列都要对齐
一个单元格同时设rowspan="2" colspan="3"，等于吃掉2×3=6个原始格子。周围所有行、列都得按这个“吞掉量”做减法。
- 该单元格所在行，其余单元格的
colspan总和 + 3 必须等于总列数（如共5列，则其他colspan之和只能是2）
- 下一行中，它覆盖的3列位置全部留空——不能写
<td></td>，也不能用colspan="0"（HTML5中无效）
-
和
分开写时，务必确保展开后的逻辑列数一致，否则
border-collapse: collapse下边框会断开
浏览器不报错，但结构错一位，整张表就错位。关键不是“怎么写”，而是“哪里不该写”。
合并三行，不是随便哪一行加rowspan="3"都行——它只对当前单元格生效，并向下“锁定”对应列位置。比如你要让“张老师”覆盖第1、2、3行的第一列，就得把rowspan="3"写在第1行的<td rowspan="3">张老师</td>里，而不是第2行或第3行。
- 写在最后一行？浏览器没后续行可跨，
rowspan直接被忽略，看起来毫无效果 - 值超过剩余行数（比如只剩2行却写
rowspan="4"），会导致DOM结构异常，tr.children.length可能不一致 - rowspan本质是“占位”，不是“拉高”，它不改变当前单元格渲染高度，只是告诉浏览器：“下面n−1行，这个列位置你别再画
了” 被跨过的行必须彻底删掉对应
，不能留空 这是最常踩的坑：有人以为第二行第一列“没内容”，就写个
<td></td>占位，结果整张表向右偏移一列。浏览器会把它当真实单元格渲染，导致列数膨胀。- ✅ 正确：第1行有
<td rowspan="3">张老师</td>，第2、3行同一列**完全不写或 ** - ❌ 错误：
<td></td>、<td> 、甚至<code><td style="display:none">——只要DOM里存在该元素，就算占位 <li>验证方法：用<code>document.querySelectorAll('tr')[1].children.length对比第0行，若不等，说明结构已错动态生成时得先统计连续重复行数
服务端模板或JS拼接表格时，不能靠“看到相同值就加rowspan”，必须确认是否相邻且连续。中间断开，就得重置计数。
- 只在重复块的**第一行**设置
rowspan，后续同组行对应列直接omit（不生成任何） - Vue/React中别在v-for或map里用
v-if控制显示——容易漏掉本该删除的，建议提前聚合数据，生成带 rowspan字段的结构化数组- Node.js模板引擎（如EJS）中，需用变量缓存上一行值+计数器，判断是否为新组起点
colspan和rowspan混用时，行列都要对齐
一个单元格同时设
rowspan="2" colspan="3"，等于吃掉2×3=6个原始格子。周围所有行、列都得按这个“吞掉量”做减法。- 该单元格所在行，其余单元格的
colspan总和 + 3 必须等于总列数（如共5列，则其他colspan之和只能是2） - 下一行中，它覆盖的3列位置全部留空——不能写
<td></td>，也不能用colspan="0"（HTML5中无效） -
和
分开写时，务必确保展开后的逻辑列数一致，否则
border-collapse: collapse下边框会断开 浏览器不报错，但结构错一位，整张表就错位。关键不是“怎么写”，而是“哪里不该写”。
- Vue/React中别在v-for或map里用
- ❌ 错误：
- ✅ 正确：第1行有
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
