本文详解如何正确使用 `rowspan` 和 `colspan` 构建包含三行独立数据（如 weight 1/2/4）的表格页脚，解决因跨列计算错误导致列错位、内容溢出等问题，并提供可直接运行的完整代码示例。
在构建复杂结构的 HTML 表格时，<tfoot> 区域常被用于汇总或补充说明，但其布局逻辑极易因 rowspan/colspan 设置不当而崩溃——尤其当需要在某一列下垂直展示多组键值对（如 “Weight 1 – 20”、“Weight 2 – 40”、“Weight 4 – 60”）时。核心问题往往源于列总数不一致：表头、主体与页脚各行所占列数必须严格对齐，否则浏览器将自动补列或截断，造成视觉错位甚至内容溢出（如原例中 9 跑到表格外）。
✅ 关键修复点解析
修正 Weight Percentage (%) 列的跨列数
原 <thead> 中该列设为 colspan="1" rowspan="2"，但其下方实际需容纳两列（Weight 1 / Weight 2 的对应值），因此必须改为 colspan="2"，并同步更新 <tbody> 中对应单元格的 colspan="2"，确保整列宽度一致。-
扩展页脚为三行结构
<tfoot> 需显式定义三个 <tr>：- 第一行：放置“Summation”标题及左侧合并列（rowspan="3"），同时承载第一组键值（如 Weight 1 + 20）；
- 第二行：仅填充第二组键值（Weight 2 + 40），无需重复 rowspan 单元格；
- 第三行：填充第三组键值（Weight 4 + 60）。
所有 rowspan="3" 的单元格（如 Summation、30、60 等）将自然贯穿这三行，形成整洁的纵向对齐。
-
列数一致性验证
全表每行总列数应恒为 9：- <thead> 第一行：1（Discipline）+ 3（Weight Type 1）+ 2（Weight %）+ 3（Weight Type 2）= 9
- <thead> 第二行：1（空 th）+ 3 + 0 + 3 + 2（拆分后的 Weight % 子列）= 9
- <tbody> 每行：1 + 3 + 2 + 3 = 9
- <tfoot> 每行：1（rowspan）+ 3（rowspan）+ 2（当前行键值）+ 3（rowspan）= 9
✅ 完整可运行代码
<style>
.table th, .table td {
border: 1px solid black;
padding: 8px;
text-align: center;
}
</style>
<table class="table">
<thead>
<tr>
<td>Discipline</td>
<th colspan="3">Weight Type 1</th>
<th colspan="2" rowspan="2">Weight Percentage (%)</th>
<th colspan="3">Weight Type 2</th>
</tr>
<tr>
<th></th>
<th>Weight 1</th>
<th>Weight 2</th>
<th>Weight 4</th>
<th>Weight 1</th>
<th>Weight 2</th>
<th>Weight 4</th>
</tr>
</thead>
<tbody>
<tr style="background-color: white;">
<th>Discipline 1</th>
<td>10</td>
<td>20</td>
<td>30</td>
<td colspan="2">100</td>
<td>2</td>
<td>1</td>
<td>3</td>
</tr>
<tr style="background-color: white;">
<th>Discipline 2</th>
<td>20</td>
<td>40</td>
<td>60</td>
<td colspan="2">100</td>
<td>4</td>
<td>2</td>
<td>6</td>
</tr>
</tbody>
<tfoot>
<tr>
<td rowspan="3"><b>Summation</b></td>
<td rowspan="3">30</td>
<td rowspan="3">60</td>
<td rowspan="3">90</td>
<td style="width: 100px;">Weight 1</td>
<td style="width: 100px;">20</td>
<td rowspan="3">6</td>
<td rowspan="3">3</td>
<td rowspan="3">9</td>
</tr>
<tr>
<td>Weight 2</td>
<td>40</td>
</tr>
<tr>
<td>Weight 4</td>
<td>60</td>
</tr>
</tfoot>
</table>⚠️ 注意事项
- 避免隐式列扩展：切勿依赖浏览器自动补列，始终手动校验每行 <tr> 的 <td>/<th> 数量是否匹配表头定义的总列宽。
- 样式兼容性：<tfoot> 在部分旧版浏览器中可能渲染顺序异常（显示在 <tbody> 之前），建议配合 CSS order 或 Flexbox 布局进一步控制（现代项目推荐）。
- 语义化增强：若需无障碍支持，可为 <tfoot> 添加 aria-label="Summary of weight percentages" 提升可访问性。
通过精准控制跨行跨列属性并保持全表列数统一，即可稳健实现多层嵌套的页脚结构，让数据呈现既专业又清晰。
