当 <td rowspan="8"> 实际仅覆盖 7 行时，浏览器会自动将后续单元格“挤入”剩余空间，导致最后一行无法独占新行——这是 rowspan 计数错误引发的典型布局异常。
当 `
在 HTML 表格中，rowspan 属性定义一个单元格应跨越的行数，其值必须严格等于该单元格实际占据的 <tr> 数量（包括自身所在行）。在您的代码中，首列 <td rowspan="8"> 声称跨越 8 行，但 <tbody> 内实际仅有 7 个 <tr>（含 subs 行和最后一行），导致浏览器渲染逻辑错乱：第 8 行“空间”被预留却无对应 <tr>，后续 <tr class="last-row"> 被强制插入到第 7 行的剩余列中，从而出现“最后一行与倒数第二行并列”的视觉错误。
✅ 正确做法是精确统计所有参与 rowspan 的行：
- 首列 <td> 占据：第 1–6 行（6 条普通 issue）、第 7 行（colspan="3" 的“Hiding…”行）→ 共 7 行
- 第 8 行是独立的 .last-row，不应被首列 rowspan 覆盖，因此 rowspan 必须设为 7
同时，.last-row 需确保结构完整、列数对齐：
- 它包含 2 个 <td>：第一个占 1 列（br-rb），第二个 colspan="3" 覆盖剩余列 → 总列宽 = 1 + 3 = 4，与表头一致 ✅
以下是修正后的关键代码段（仅展示 <tbody> 部分）：
立即学习“前端免费学习笔记（深入）”；
<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 是“占用型”属性，不会自动创建新行/列，仅影响现有 <tr> 中单元格的渲染范围；
- 使用 rowspan 时，务必手动逐行计数（建议在纸上画表格网格并编号），尤其当存在 colspan 或嵌套结构时；
- Bootstrap 的 row/col 类（如内部 .results）不影响表格行列计算，但需确保其父 <td> 的 colspan 值与表头总列数一致（本例为 4 列）；
- 开发时可用浏览器开发者工具检查 <td> 实际渲染的 grid-area 或使用 outline: 1px solid red 临时高亮单元格边界，验证跨行跨列效果。
总结：表格布局稳定性的核心在于 rowspan/colspan 的数值必须与 DOM 结构中的 <tr> 和 <td> 实际数量严格匹配。一次计数失误，就会引发整行错位——养成“画格子+数行数”的习惯，是避免此类问题最可靠的方法。
