rowspan值设为0会被浏览器忽略或转为1，因HTML规范要求其必须为正整数；合并三行应写rowspan="3"，表示从当前行起共占3行，而非跨2行。
rowspan 值设为 0 会怎样？
设 rowspan="0" 不是标准行为，多数浏览器会忽略或转为 rowspan="1"，实际无法实现“自动跨到最后一行”的效果。HTML 规范明确要求 rowspan 必须是正整数，最小为 1；想靠 0 省事只会让表格结构错乱，尤其在动态渲染时容易引发后续 <td> 错位。
<h3>跨行单元格必须和它下方的单元格对齐吗？</h3>
<p>必须。浏览器按行解析表格，<code>rowspan 的作用是“占用接下来 N−1 行的同一列位置”。如果某行该列已有其他 <td> 或 <code><th>，就会产生冲突——轻则样式错位，重则触发浏览器纠错机制（比如把多余单元格挤到下一行）。
<ul><li>确保目标列在后续 N−1 行中**完全留空**（即不写任何 <code><td>）
<li>用浏览器开发者工具检查 <code>Computed 标签下 display 是否为 table-cell，避免 CSS 覆盖导致 rowspan 失效
flex 或 grid 布局包裹表格，rowspan 可能被无视合并三行时该写 rowspan="3" 还是 rowspan="2"？
写 rowspan="3"。它的含义是“从当前行开始，总共占据 3 行”，不是“向下跨 2 行”。常见错误是以为要填跨过的行数减一，结果只跨了两行却写了 rowspan="2"，看起来正常，但一旦插入新行或动态增删数据，立刻暴露逻辑偏差。
<tr> <td rowspan="3">姓名</td> <td>张三</td> </tr> <tr> <td>李四</td> </tr> <tr> <td>王五</td> </tr>
上面这段里，rowspan="3" 的单元格覆盖第 1、2、3 行的第 1 列，后面两行的第 1 列不能出现任何 <td>。<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><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill5493" title="html-to-pptx"><img
src="https://img.php.cn/upload/skill/000/000/081/179051045119472.jpg" alt="html-to-pptx" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill5493" title="html-to-pptx">html-to-pptx</a>
<p>将多页 HTML 演示文稿转换为美化的 PPTX 文件，便于分享和分发。</p>
</div>
<a href="/xiazai/skill5493" title="html-to-pptx" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>
<h3>用 JavaScript 动态设置 rowspan 容易漏掉什么？</h3>
<p>DOM 操作后必须保证表格结构完整，否则 <code>rowspan 不生效。最常漏的是：修改后没同步调整对应行的单元格数量，导致行内 <td> 总数不一致，浏览器自动补 <code><td> 或吞掉内容。
<ul>
<li>用 <code>element.setAttribute('rowspan', '3') 后，检查后续两行的 cells.length 是否比正常少 1
rowspan 属性rowspan 时，确保 key 唯一且不因数据顺序变化而重复，否则虚拟 DOM diff 会误删跨行单元格跨行合并看着简单，真正卡住人的往往不是语法，而是表格隐式结构约束——它不像 CSS 那样允许局部覆盖，每一处 rowspan 都得和周围行严格咬合。
