本文详解如何正确使用 `rowspan` 和 `colspan` 构建包含三行独立数据（如 weight 1/2/4）的表格页脚，解决因跨列计算错误导致列错位、内容溢出等问题，并提供可直接运行的完整代码示例。

在构建复杂结构的 HTML 表格时，

区域常被用于汇总或补充说明，但其布局逻辑极易因 rowspan/colspan 设置不当而崩溃——尤其当需要在某一列下垂直展示多组键值对（如 “Weight 1 – 20”、“Weight 2 – 40”、“Weight 4 – 60”）时。核心问题往往源于列总数不一致：表头、主体与页脚各行所占列数必须严格对齐，否则浏览器将自动补列或截断，造成视觉错位甚至内容溢出（如原例中 9 跑到表格外）。

✅ 关键修复点解析

1. 修正 Weight Percentage (%) 列的跨列数
   原 中该列设为 colspan="1" rowspan="2"，但其下方实际需容纳两列（Weight 1 / Weight 2 的对应值），因此必须改为 colspan="2"，并同步更新

   中对应单元格的 colspan="2"，确保整列宽度一致。

2. 扩展页脚为三行结构
   

   需显式定义三个 ：
   • 第一行：放置“Summation”标题及左侧合并列（rowspan="3"），同时承载第一组键值（如 Weight 1 + 20）；
   • 第二行：仅填充第二组键值（Weight 2 + 40），无需重复 rowspan 单元格；
   • 第三行：填充第三组键值（Weight 4 + 60）。
     所有 rowspan="3" 的单元格（如 Summation、30、60 等）将自然贯穿这三行，形成整洁的纵向对齐。

3. 列数一致性验证
   全表每行总列数应恒为 9：

   • 第一行：1（Discipline）+ 3（Weight Type 1）+ 2（Weight %）+ 3（Weight Type 2）= 9
   • 第二行：1（空 th）+ 3 + 0 + 3 + 2（拆分后的 Weight % 子列）= 9
   • 每行：1 + 3 + 2 + 3 = 9
   • 每行：1（rowspan）+ 3（rowspan）+ 2（当前行键值）+ 3（rowspan）= 9

     ✅ 完整可运行代码

     
     
     
       
     
         
     
           
     Discipline
           
     Weight Type 1
           
     Weight Percentage (%)
           
     Weight Type 2
         
         
     
           
     
           
     Weight 1
           
     Weight 2
           
     Weight 4
           
     Weight 1
           
     Weight 2
           
     Weight 4
         
       
       
     
         
     
           
     Discipline 1
           
     10
           
     20
           
     30
           
     100
           
     2
           
     1
           
     3
         
         
     
           
     Discipline 2
           
     20
           
     40
           
     60
           
     100
           
     4
           
     2
           
     6
         
       
       
     
         
     
           
     Summation
           
     30
           
     60
           
     90
           
     Weight 1
           
     20
           
     6
           
     3
           
     9
         
         
     
           
     Weight 2
           
     40
         
         
     
           
     Weight 4
           
     60
         
       
     

     ⚠️ 注意事项

     • 避免隐式列扩展：切勿依赖浏览器自动补列，始终手动校验每行 的 / 数量是否匹配表头定义的总列宽。
     • 样式兼容性： 在部分旧版浏览器中可能渲染顺序异常（显示在 之前），建议配合 CSS order 或 Flexbox 布局进一步控制（现代项目推荐）。
     • 语义化增强：若需无障碍支持，可为 添加 aria-label="Summary of weight percentages" 提升可访问性。

       通过精准控制跨行跨列属性并保持全表列数统一，即可稳健实现多层嵌套的页脚结构，让数据呈现既专业又清晰。