使用rowspan与colspan的复杂HTML表格显示异常，排查配置错误

错误根因 #

HTML 表格的 colspan/rowspan 渲染规则为：跨行、跨列的单元格会占用对应行列的空间，后续行的单元格会自动从左到右填入剩余空位列，不会自动跳过被占位列预留位置。当前代码的属性配置存在三处核心错误，直接破坏了原有列结构：

• 1号、2号单元格的rowspan值配置过大
  你给1、2号单元格设置了rowspan="3"，代表这两个单元格会纵向跨越第一、第二、第三三行，占满第三行左侧的3个列位置。按目标布局，这两个单元格仅需覆盖前两行的位置，不应延伸到第三行。
• 5号单元格的rowspan值配置错误
  你给5号单元格设置了rowspan="2"，代表该单元格会纵向跨越第二、第三两行，进一步占用第三行的右侧列空间。这一配置叠加1、2号单元格的占位，会把第三行的所有可用列空间完全占满。
• 第三行单元格超出剩余列空间
  被上面的跨行配置占满空间后，你在第三行写入的6、7、8、9、10共5个独立单元格没有空列可以放置，被浏览器自动推到表格最右侧，直接把原本5列的表格宽度撑成10列，造成整体列结构完全错位。

修正方案 #

• 将1号、2号单元格的rowspan值从3改为2，仅覆盖第一、第二行的纵向空间
• 将5号单元格的rowspan值从2改为1，仅占据第二行的列宽，不延伸到第三行
• 保留第三、第四、第五行的原有单元格配置，确保每一行的总占位列数等于表格总列数（5列）

修正后表格会匹配目标布局的列对齐效果，不会出现单元格错位、宽度异常的问题。

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