本文详解如何通过正确设置 `rowspan` 和 `colspan`，在表格 `
` 中构建包含三行数据的复合页脚，特别解决“weight percentage (%)”列需垂直拆分为多行、且保持列对齐不溢出的核心问题。在 HTML 表格布局中，实现页脚（<tfoot>）内某列“一列三行”的结构（如展示 Weight 1 - 20、Weight 2 - 40、Weight 4 - 60），关键在于列数对齐与跨单元格属性的协同控制。常见错误是忽略 colspan 值与整体列宽匹配，导致后续单元格错位甚至溢出表格边界。
✅ 正确结构要点解析
表头列数一致性：
<thead> 中第一行使用 colspan="2" 为 Weight Percentage (%) 占位（因其下方需容纳两列内容：标签 + 数值），同时将 rowspan="2" 移至该 <th>，确保其纵向贯穿两行表头；第二行表头则需补全对应列，避免列数断层。主体行（<tbody>）同步适配：
每行中 Weight Percentage (%) 对应单元格必须使用 colspan="2"，与表头对齐。否则会引发列偏移，使后续列（如 Weight Type 2 的 Weight 4）被挤出表格。-
页脚三行实现逻辑：
- 使用 <tr> 定义三行；
- 左侧固定列（如 Summation、各类汇总值）统一设 rowspan="3"；
- 右侧需分三行显示的区域（如 Weight Percentage 子项），每行用独立 <td> 填充标签与数值，不跨列，自然形成垂直结构。
✅ 修正后完整代码示例
<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>Weight 1</td>
<td>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>（含 thead/tbody/tfoot）的有效列数必须一致（本例为 9 列）。可通过手动计数或浏览器开发者工具检查 td/th 数量。
- 避免冗余 colspan="1"：显式声明 colspan="1" 不仅多余，还易掩盖逻辑错误；仅在需要合并多列时使用 colspan="n"（n > 1）。
- 样式兼容性：<tfoot> 应置于 <tbody> 之后，但部分旧版浏览器可能渲染异常，建议配合 display: table-footer-group 进行 CSS 强制定位（非必需，但可增强健壮性）。
- 语义化增强：若用于数据报表，建议为 Weight Percentage (%) 列添加 scope="col"，为 Discipline 列添加 scope="row"，提升可访问性。
通过精准控制 rowspan 与 colspan 的层级关系，并确保各区域列数严格对齐，即可稳健实现复杂页脚布局——无需 JavaScript，纯语义化 HTML + CSS 即可达成专业级表格呈现效果。
立即学习“前端免费学习笔记（深入）”；
