rowspan不是排版工具，而是声明单元格向下跨行占位的语义属性；滥用会导致表格结构错乱、语义丢失、屏幕阅读器误读及JS获取异常；视觉错位应改用CSS定位、Grid布局或Transform等现代方案。
别用 rowspan 做“错位排版”——它不是排版工具，强行这么用只会让表格结构崩溃、语义丢失、屏幕阅读器读错、JS 拿不到正确单元格。
rowspan 不是视觉拉伸，而是网格占位声明
rowspan 的作用是告诉浏览器：“这个 <td> 从当前行起，向下锁定 N 行同一列的位置”。它不改变高度样式，也不允许你“故意错开”来制造视觉花哨效果。
- 写了
rowspan="2"却在下一行同一列还写<td>→ 浏览器会多画一列，整行右移 - 跨行数超出剩余行数（如
rowspan="5"但只剩 2 行）→ 浏览器按 2 行渲染，但 DOM 中列数已错，tr.cells.length返回异常值 - 用
rowspan模拟“阶梯式布局”或“Z 字形错位”→ 实际只是不断触发浏览器自动补空<td>，最终表体散架
真正需要错位效果时，该换什么技术
如果你的目标是视觉上的非对齐、斜向、错层、悬浮或响应式偏移，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>，而是写了空标签或留白 -
<thead>和<tbody>分开渲染时，<thead>用了rowspan="2"，但<tbody>第一行没跳过对应列 → 表头和正文列数不一致，边框断裂 - 没做列总数守恒验证：每行真实列数 =
Array.from(tr.children).reduce((s, el) => s + (el.colSpan || 1), 0)，所有<tr>必须返回相同结果
真正难的从来不是怎么写 rowspan，而是你决定用它的那一刻，就得为整张表的行列坐标负责——少跳一次 <td>，整张表就偏了，而且浏览器不会报错，只默默渲染出一个你看不出哪里不对的“错位”。
