本文详解如何在 `
` 中正确构建三行结构，解决因 `colspan`/`rowspan` 设置错误导致的列错位问题，并确保“weight percentage (%)”列下方精准显示 weight 1/2/4 三组带值的独立行。在 HTML 表格中实现复杂页脚（如多行分列汇总）时，关键在于列数对齐与跨单元格属性的精确协同。原代码中存在两个核心问题：
- 中 Weight Percentage (%) 的 colspan="1" 错误设置：该列需同时覆盖“Weight Type 1”和“Weight Type 2”的横向空间，实际应设为 colspan="2"（因右侧有两组 Weight 列，每组含 3 列，但中间仅占 1 列宽度，需通过 colspan 协调整体列数平衡）；
- 缺失第三行且 rowspan 未同步更新：要实现三行数据（Weight 1/2/4），必须显式添加第三个
，并确保所有需纵向合并的单元格（如 Summation、数值列）的 rowspan 值统一设为 3。 以下是修正后的完整代码（已通过浏览器验证，列对齐无溢出）：
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 ✅ 关键修正点总结：
-
列数一致性： 第一行总列数 = 1 (Discipline) + 3 (Type 1) + 2 (Percentage) + 3 (Type 2) = 9；第二行通过空
占位保持列数匹配； - 页脚三行结构： 使用三个
，其中第一行定义 Weight 1 行，第二行 Weight 2，第三行 Weight 4， 内容严格按列位置放置； - rowspan 同步：所有需垂直跨越三行的单元格（如 Summation、数值列 30/60/90/6/3/9）均设 rowspan="3"，避免列偏移；
- 样式建议：添加 padding 和 text-align 提升可读性，width 限制文本列宽度防止内容撑开表格。
⚠️ 注意：若后续需动态生成此类页脚，务必确保 JavaScript 操作 DOM 时同步更新所有关联单元格的 rowspan 值，否则将重现列错位问题。
- 页脚三行结构： 使用三个
- 缺失第三行且 rowspan 未同步更新：要实现三行数据（Weight 1/2/4），必须显式添加第三个
