如何修正含多组不同起始行rowspan的复杂HTML表格代码？

HTML表格的rowspan渲染异常，核心原因是行结构的单元格计数不匹配，不同浏览器对缺失/多余单元格的补全逻辑存在差异，导致错位。以下是具体的修正方法：

核心原则 #

不管rowspan在哪个行起始，必须保证表格的每一行，其「显式单元格数 + 被上一行rowspan覆盖的单元格数」严格等于表格的总列数，禁止依赖浏览器自动补全缺失单元格。

具体修正步骤 #

1. 先拆解网格结构
   把你期望的表格转化为最小单元格组成的网格（比如M行N列），标注每个合并单元格的跨越范围（如「占据第1-3行、第1列」）。这是避免逻辑混乱的关键。

2. 逐行编写单元格

   • 在合并单元格的起始行，通过rowspan=N指定跨越行数；
   • 后续被跨越的N-1行，必须省略对应列的单元格，不能重复编写；
   • 每一行的显式单元格必须对应网格的剩余列位置，确保总列数一致。

错误示例与修正对比 #

假设你期望的结构是：

• 第1行：单元格A（跨3行）、B、C
• 第2行：单元格D（跨2行）、E
• 第3行：单元格F

错误代码（可能导致渲染错位） #

<table border="1">
  <tr>
    <td rowspan="3">A</td>
    <td>B</td>
    <td>C</td>
  </tr>
  <tr>
    <td>D</td> <!-- 未加rowspan=2，导致第3行多一个单元格 -->
    <td>E</td>
  </tr>
  <tr>
    <td>D-续</td> <!-- 错误添加了被D应该覆盖的单元格 -->
    <td>F</td>
  </tr>
</table>

修正后的正确代码 #

<table border="1">
  <tr>
    <td rowspan="3">A</td> <!-- 跨3行，占据第1列 -->
    <td>B</td>
    <td>C</td>
  </tr>
  <tr>
    <td rowspan="2">D</td> <!-- 跨2行，占据第2列 -->
    <td>E</td>
  </tr>
  <tr>
    <!-- 第1列被A覆盖、第2列被D覆盖，无需编写单元格 -->
    <td>F</td>
  </tr>
</table>

额外注意事项 #

• 若存在多组rowspan交叉（比如同时有行1起始的rowspan和行2起始的rowspan），必须严格按照网格的列位置编写，不要随意调整单元格顺序；
• 可以给表格添加table-layout: fixed样式，强制浏览器按定义的列宽渲染，避免因内容长度导致的列宽偏移进一步加重错位问题。

内容的提问来源于stack exchange，提问作者Akira Okumura