rowspan不是排版工具，而是声明单元格向下跨行占位的语义属性；滥用会导致表格结构错乱、语义丢失、屏幕阅读器误读及js获取异常；视觉错位应改用css定位、grid布局或transform等现代方案。
别用 rowspan 做“错位排版”——它不是排版工具，强行这么用只会让表格结构崩溃、语义丢失、屏幕阅读器读错、JS 拿不到正确单元格。
rowspan 不是视觉拉伸，而是网格占位声明
rowspan 的作用是告诉浏览器：“这个 <td> 从当前行起，向下锁定 N 行同一列的位置”。它不改变高度样式，也不允许你“故意错开”来制造视觉花哨效果。
<ul><li>写了 <code>rowspan="2" 却在下一行同一列还写 <td> → 浏览器会多画一列，整行右移
<li>跨行数超出剩余行数（如 <code>rowspan="5" 但只剩 2 行）→ 浏览器按 2 行渲染，但 DOM 中列数已错，tr.cells.length 返回异常值
rowspan 模拟“阶梯式布局”或“Z 字形错位”→ 实际只是不断触发浏览器自动补空 <td>，最终表体散架
<h3>真正需要错位效果时，该换什么技术</h3>
<p>如果你的目标是视觉上的非对齐、斜向、错层、悬浮或响应式偏移，<code>rowspan 完全不合适。这些场景应交给现代布局机制：
- 纯视觉错位：用
position: relative+top/left微调单个单元格，不影响表格结构 - 复杂不对称布局：改用
display: grid，用grid-row/grid-column精确控制每个元素坐标 - 带语义的分组错位（如课程表中“学期标题跨多行+右侧科目逐行排列”）：仍可用
rowspan，但必须严格遵循“占位—跳过”规则，且仅用于数据表，不是装饰 - 需要动画或交互错位：CSS Transform 或 JS 动态 class 切换，避开表格固有渲染模型
动态生成时最容易漏掉的校验点
服务端模板或前端 JS 拼接表格时，rowspan 错误往往不是语法写错，而是逻辑没闭环：
- 只判断值相等就设
rowspan，没确认是否连续相邻行 → 中间断开后，后续行仍被“跳过”，导致空白列 - 聚合数据后，在循环里用
if (i === firstIndex) { write td with rowspan }，但忘了在其余同组行彻底 omit 对应<td>，而是写了空标签或留白 <li><code><thead> 和 <code><tbody> 分开渲染时，<code><thead> 用了 <code>rowspan="2"，但<tbody> 第一行没跳过对应列 → 表头和正文列数不一致，边框断裂 <li>没做列总数守恒验证：每行真实列数 = <code>Array.from(tr.children).reduce((s, el) => s + (el.colSpan || 1), 0)，所有<tr> 必须返回相同结果 <p>真正难的从来不是怎么写 <code>rowspan，而是你决定用它的那一刻，就得为整张表的行列坐标负责——少跳一次<td>，整张表就偏了，而且浏览器不会报错，只默默渲染出一个你看不出哪里不对的“错位”。</td>
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
