本文详解如何正确使用 `rowspan` 和 `colspan` 构建包含三行独立数据（如 weight 1/2/4）的表格页脚，解决因跨列计算错误导致列错位、内容溢出等问题，并提供可直接运行的完整代码示例。
在构建复杂结构的 HTML 表格时，
区域常被用于汇总或补充说明，但其布局逻辑极易因 rowspan/colspan 设置不当而崩溃——尤其当需要在某一列下垂直展示多组键值对（如 “Weight 1 – 20”、“Weight 2 – 40”、“Weight 4 – 60”）时。核心问题往往源于列总数不一致：表头、主体与页脚各行所占列数必须严格对齐，否则浏览器将自动补列或截断，造成视觉错位甚至内容溢出（如原例中 9 跑到表格外）。✅ 关键修复点解析
-
修正 Weight Percentage (%) 列的跨列数
中对应单元格的 colspan="2"，确保整列宽度一致。
原 中该列设为 colspan="1" rowspan="2"，但其下方实际需容纳两列（Weight 1 / Weight 2 的对应值），因此必须改为 colspan="2"，并同步更新扩展页脚为三行结构
需显式定义三个： - 第一行：放置“Summation”标题及左侧合并列（rowspan="3"），同时承载第一组键值（如 Weight 1 + 20）；
- 第二行：仅填充第二组键值（Weight 2 + 40），无需重复 rowspan 单元格；
- 第三行：填充第三组键值（Weight 4 + 60）。
所有 rowspan="3" 的单元格（如 Summation、30、60 等）将自然贯穿这三行，形成整洁的纵向对齐。
列数一致性验证
全表每行总列数应恒为 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" 提升可访问性。
通过精准控制跨行跨列属性并保持全表列数统一，即可稳健实现多层嵌套的页脚结构，让数据呈现既专业又清晰。
- 样式兼容性： 在部分旧版浏览器中可能渲染顺序异常（显示在 之前），建议配合 CSS order 或 Flexbox 布局进一步控制（现代项目推荐）。
- 第二行：1（空 th）+ 3 + 0 + 3 + 2（拆分后的 Weight % 子列）= 9
