rowspan不是合并而是“占位+跳过”：必须在起始td/th写rowspan="n"，后续n−1行同一列要彻底省略td/th标签，否则必然错位；值n不得超过剩余行数，且被跨行位置绝不可写空td或留空标签。
直接说结论：rowspan 不是“合并”，而是“占位 + 跳过”——你必须在起始 <td> 上写 <code>rowspan="N"，然后在接下来的 N−1 行里，**彻底删掉同一列的 <td>**，否则表格必然错位。<h3>rowspan 必须写在起始行的 <code><td> 或 <code><th> 上<p>它只对当前标签生效，不会向上或向后“传染”。比如你想让第 3 行第 2 列跨 2 行，就得把 <code>rowspan="2" 写在第 3 行的 <td rowspan="2"> 里，而不是第 2 行或第 4 行。<p>常见错误现象：</p>
<ul>
<li>写了 <code>rowspan="3" 却只显示一行高度 → 很可能写在了最后一行，没剩余行可跨
<td> 数量正确，但被跨行的后续行仍多写了一个 <code><td>
<p>关键判断：值 <code>N 必须 ≤ 从当前行到表格末尾的剩余行数（含当前行）。超出部分浏览器会截断渲染，但语义已损坏，table.rows[i].cells.length 会出错。
被跨过的行必须彻底省略对应列的 <td> 标签<p>不是留空，不是写 <code><td></td>，是整行里**根本不出现这个 <td>**。浏览器靠 <code>rowspan 的数值自动跳过位置，一旦多一个 <td>，就等于强行插入一列，破坏整行结构。<p>✅ 正确示例（左列跨 3 行，右列每行不同）：</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher"><img
src="https://img.php.cn/upload/skill/000/000/081/179109368394970.jpg" alt="Wechat HTML Publisher" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher" class="overflowclass">Wechat HTML Publisher</a>
<p class="overflowclass">直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。</p>
</div>
<a rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>
<pre class="brush:php;toolbar:false;"><tr>
<td rowspan="3">张老师</td>
<td>数学</td>
</tr><tr>
<td>物理</td> <!-- 第一列完全不写 -->
</tr><tr>
<td>化学</td> <!-- 第一列完全不写 -->
</tr></pre>
<p>❌ 错误写法（哪怕只写个空 <code><td>）：<pre class="brush:php;toolbar:false;"><tr>
<td rowspan="3">张老师</td>
<td>数学</td>
</tr><tr>
<td></td> <!-- 这个空 td 会占位，导致右列错位 -->
<td>物理</td>
</tr></pre>
<h3>动态生成时，rowspan 值和跳过逻辑必须同步计算</h3>
<p>服务端模板或 JS 拼接时，不能靠“看到相同值就加 rowspan”，得先统计连续重复段的长度：</p>
<ul>
<li>只在重复块的第一行写 <code>rowspan，值为该块总行数
<td>）<li>中间隔了一行不同值，计数必须重置，不能跨段合并</li>
<li>Vue/React 中避免在 <code>v-for 或 map 里用 v-if 控制是否渲染 <td>，容易漏掉隐藏逻辑；应提前聚合数据，生成带 <code>rowspan 和跳过标记的结构例如库存表中“备注”字段连续 4 行都是“夏季清仓款”，就得在第一行写 rowspan="4"，后面 3 行对应列直接不输出任何 <td>。<h3>rowspan 对样式、JS 访问和可访问性的真实影响</h3>
<p>它不改变 DOM 结构，只是视觉占位：</p>
<ul><li>CSS 中设置 <code>height 或 vertical-align 作用于该 <td> 本身，不影响被跳过的行<li>
<code>table.rows[i].cells 返回的是实际存在的 <td> 节点，被 <code>rowspan 跨过的行里少一个节点，索引会偏移 —— 别假设每行 cells.length 都一样
<th> 也用了 <code>rowspan；如需无障碍支持，优先用 headers 属性显式绑定，而非依赖视觉合并真正难的从来不是手写静态 HTML，而是在数据动态变化、分页加载、筛选重排后，还能保证每行 <td> 数量精准匹配 <code>rowspan 占位逻辑 —— 这个校验点，90% 的人上线前根本没测过。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
