HTML 表格中 rowspan 值不匹配导致最后一行错位的解决方案-html教程-PHP中文网

HTML 表格中 rowspan 值不匹配导致最后一行错位的解决方案

当实际仅覆盖 7 行时，浏览器会自动将后续单元格“挤入”剩余空间，导致最后一行无法独占新行——这是 rowspan 计数错误引发的典型布局异常。

当 `

` 实际仅覆盖 7 行时，浏览器会自动将后续单元格“挤入”剩余空间，导致最后一行无法独占新行——这是 `rowspan` 计数错误引发的典型布局异常。

在 HTML 表格中，rowspan 属性定义一个单元格应跨越的行数，其值必须严格等于该单元格实际占据的

数量（包括自身所在行）。在您的代码中，首列声称跨越 8 行，但内实际仅有 7 个（含 subs 行和最后一行），导致浏览器渲染逻辑错乱：第 8 行“空间”被预留却无对应，后续被强制插入到第 7 行的剩余列中，从而出现“最后一行与倒数第二行并列”的视觉错误。

✅ 正确做法是精确统计所有参与 rowspan 的行：

首列占据：第 1–6 行（6 条普通 issue）、第 7 行（colspan="3" 的“Hiding…”行）→ 共 7 行
第 8 行是独立的 .last-row，不应被首列 rowspan 覆盖，因此 rowspan 必须设为 7

同时，.last-row 需确保结构完整、列数对齐：

Doc To HTML

使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。

下载

它包含 2 个：第一个占 1 列（br-rb），第二个 colspan="3" 覆盖剩余列 → 总列宽 = 1 + 3 = 4，与表头一致 ✅

以下是修正后的关键代码段（仅展示

部分）：

<tbody>
<tr class="discoveryurl">
<td class="text-start br-b0" rowspan="7"> <!-- ✅ 改为 7 -->
      opc.tcp://echo:53530/OPCUA/SimulationServer
    </td>
    <td class="text-start">Anonymous authentication enabled</td>
    <td><a href="#" target="_blank">10001</a></td>
    <td>...</td>
  </tr>
<tr>
<!-- 第2行 --><td class="text-start">Message Security Mode None</td>
    <td><a href="#" target="_blank">10006</a></td>
    <td>...</td>
  </tr>
<tr>
<!-- 第3行 --><td class="text-start">Security Policy None</td>
    <td><a href="#" target="_blank">10009</a></td>
    <td>...</td>
  </tr>
<tr>
<!-- 第4行 --><td class="text-start">Self-signed client application certificates trusted</td>
    <td><a href="#" target="_blank">10010</a></td>
    <td>...</td>
  </tr>
<tr>
<!-- 第5行 --><td class="text-start">Auditing disabled</td>
    <td><a href="#" target="_blank">10002</a></td>
    <td>...</td>
  </tr>
<tr>
<!-- 第6行：含 colspan="3" 的“Hiding…”行 --><td class="text-start subs" colspan="3">Hiding 3 random issues. <a href="#">subscribe</a> to view all.</td>
  </tr>
<!-- ✅ 第7行：独立的最后一行，不参与首列 rowspan --><tr class="last-row">
<td class="text-start br-rb">opc</td>
    <td class="text-start" colspan="3">
      <ul class="error">
<li>Https</li>
      </ul>
</td>
  </tr>
</tbody>

⚠️ 注意事项：

rowspan 和 colspan 是“占用型”属性，不会自动创建新行/列，仅影响现有中单元格的渲染范围；
使用 rowspan 时，务必手动逐行计数（建议在纸上画表格网格并编号），尤其当存在 colspan 或嵌套结构时；
Bootstrap 的 row/col 类（如内部 .results）不影响表格行列计算，但需确保其父的 colspan 值与表头总列数一致（本例为 4 列）；
开发时可用浏览器开发者工具检查实际渲染的 grid-area 或使用 outline: 1px solid red 临时高亮单元格边界，验证跨行跨列效果。
总结：表格布局稳定性的核心在于 rowspan/colspan 的数值必须与 DOM 结构中的
和实际数量严格匹配。一次计数失误，就会引发整行错位——养成“画格子+数行数”的习惯，是避免此类问题最可靠的方法。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索前端的入门与实战技巧！