rowspan必须写在起始行的单元格中，只对所在单元格生效并向下跨行，值为正整数且不能超过剩余行数，被跨行对应列必须完全省略标签，动态生成时需统计相邻重复值行数并在首行设置、后续行跳过。

rowspan必须写在起始行的或 上

跨行合并不是“哪一行加都行”，rowspan只对它所在的那个单元格生效，并向下锁定对应列位置。比如你想让第二行第一列跨3行，就得把rowspan="3"写在第二行的<td rowspan="3">里，而不是第一行或第四行。<p>常见错误现象：写了<code>rowspan="3"却只看到1行高度——大概率写在了最后一行，没剩余行可跨。

• 值必须是正整数，rowspan="0"无效，部分浏览器会当1处理
• rowspan值不能超过从当前行到表格末尾的剩余行数（含当前行）
• 浏览器不会报错，但语义已损坏；DOM结构异常会导致table.rows[i].cells.length读取失败

被跨过的行必须彻底省略对应标签

不是留空，不是写<td></td>，是直接删掉那一列的整个<td>元素。浏览器靠<code>rowspan数值自动跳过指定行数，一旦多写一个<td>，就会挤占空间、导致列偏移甚至DOM结构错乱。<p>例如左列跨3行、右列每行内容不同，正确结构是：</p><div class="aritcle_card flexRow"> <div class="artcardd flexRow"> <a class="aritcle_card_img" href="/xiazai/skill10595" title="htmlppt.skill"><img src="https://img.php.cn/upload/skill/001/246/273/6adaf20d79f23518.jpg" alt="htmlppt.skill" ></a> <div class="aritcle_card_info flexColumn"> <a href="/xiazai/skill10595" title="htmlppt.skill">htmlppt.skill</a> <p>把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。</p> </div> <a href="/xiazai/skill10595" title="htmlppt.skill" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p><pre class="brush:php;toolbar:false;">&lt;tr&gt; &lt;td rowspan=&quot;3&quot;&gt;张老师&lt;/td&gt; &lt;td&gt;数学&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;物理&lt;/td&gt; &lt;!-- 第一列省略 --&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;化学&lt;/td&gt; &lt;!-- 第一列省略 --&gt; &lt;/tr&gt;</pre><p>错误写法是第二、三行仍保留空<code><td>或占位<code><td> ——这会让表格列数膨胀，JS读取<code>tr.cells时索引错位。

动态生成表格时rowspan容易漏掉的统计逻辑

服务端渲染或JS拼接表格时，rowspan不是静态写死就能一劳永逸的——得先统计相同值连续出现的行数，再决定在哪一行写rowspan，其余行跳过该列。

• 不能只看“值相等”，还要确认是否「相邻行」；中间隔了一行不同值，就得重置计数
• 通常只在重复块的第一行设置rowspan，后面同组行对应列直接omit（不生成<td>）<li>用Vue/React时，若在模板里用<code>v-if或if-else判定是否渲染<td>，极易漏掉隐藏的单元格，建议提前聚合数据<li>JS动态修改<code>rowspan后，DOM会重排，但不会自动删除已被跨过的<td>，必须手动移除<h3>rowspan和colspan混用时的列数守恒原则</h3> <p><code>rowspan和colspan可以一起用，但叠加后逻辑更易出错。例如<td rowspan="2" colspan="2">会同时占据2行×2列共4个单元格的位置，后续两行中，对应这2列的位置都必须跳过。<p>关键约束是：每行<code><td>/<code><th>的<code>colspan总和必须等于表格总列数（按展开后计算）。
  • 用开发者工具检查<table>右侧Layout面板是否有“Collapsed cells”警告<li>执行<code>console.table(Array.from(document.querySelectorAll('tr:first-child td, tr:first-child th')).map(el => el.colSpan))验证表头列数是否一致
  • 避免在<thead>用<code>rowspan的同时，在<tbody>第一行用<code>colspan——二者叠加会让列基准偏移

    真正难的不是手写rowspan，而是当表格从JSON动态渲染时，要确保每一行生成的单元格数量严格匹配网格预期；漏掉一次跳过，整张表就偏了。