rowspan属性从当前单元格所在行起向下占据指定数量的行位置，包括自身所在行；例如rowspan="3"覆盖当前行及后续两行，共三行高度，且被跨行对应列必须彻底省略或标签。
rowspan 属性到底合并的是哪几行
rowspan 的数值不是“跨几行”，而是“占据多少个单元格行位置”，它从当前 <td> 或 <code><th> 所在的行开始向下占用，包括自身所在行。比如 <code>rowspan="3" 表示这个单元格会覆盖当前行、下一行、再下一行——共三行高度，但只占一列宽度。
常见错误是：在第 1 行写 <td rowspan="3">分类A</td>，却在第 2、3 行又写了同列的 <td>，导致表格结构错乱甚至浏览器自动修正（表现为内容偏移或空格异常）。
<p>正确做法是：被合并的列位置，在后续行中必须跳过该列 —— 即第 2、3 行的 <code><tr> 中，对应列不能出现 <code><td> 或 <code><th>。
<h3>合并分类标签时如何对齐多行数据</h3>
<p>典型场景是左侧固定分类（如“前端”、“后端”），右侧每行展示具体条目。这时分类单元格用 <code>rowspan，右侧内容逐行写，但必须确保行数严格匹配。
例如分类“前端”要覆盖 4 行，则：
<tr> <td rowspan="4">前端</td> <td>HTML</td> </tr>-
<tr><td>CSS</td></tr>（注意：此处没有左侧<td>） <li><code><tr><td>JavaScript</td></tr> <tr><td>Vue</td></tr>- 给一个已设
rowspan="2"的<th> 再加 <code>colspan="3"，结果它横跨 3 列 × 纵跨 2 行 = 共 6 个逻辑单元格位置，后续行若没跳过对应列数，表格就塌了 - 用浏览器开发者工具检查时，不要只看渲染效果，要点开
<table> 结构，确认每行 <code><tr> 内的 <code><td> 数量是否与预期列宽一致（比如总列数为 4，某行却只有 2 个 <code><td>，大概率是前面有 <code>rowspan或colspan没算准）用 CSS 替代 rowspan 是否可行
纯 CSS 无法真正替代
rowspan的语义和表格结构能力。虽然可以用display: grid或绝对定位模拟视觉合并，但会丢失表格的可访问性（screen reader 无法理解“这一列属于同一分类”）、打印样式异常、排序/筛选 JS 库（如 DataTables）也无法识别逻辑分组。所以除非是静态展示且无交互需求，否则不建议绕过
rowspan。真要动态生成，建议用 JS 预计算每组行数，再拼接 HTML，而不是靠 CSS “看起来像”。复杂点在于：当数据来自 API 且分类数量动态变化时，
rowspan值必须在渲染前就统计好——漏统计一组，整个表格左侧就会错位，而且这种错误往往只在特定数据下暴露，不容易测试覆盖到。
如果漏掉某行、或多写一行，rowspan 就会和实际行数脱节，视觉上出现错位或空白。
和 colspan 混用时容易出问题的地方
当分类标题本身也需要横向合并（比如带“子类说明”列），rowspan 和 colspan 同时存在时，单元格坐标关系更难肉眼判断。
关键原则：rowspan 影响纵向布局，colspan 影响横向布局，二者互不干扰，但共同决定该单元格最终占据的矩形区域。
容易踩的坑：
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
