如何在 HTML 表格页脚中实现三行分列的自定义汇总区域

本文详解如何在 `

在 HTML 表格中实现复杂页脚（如多行分列汇总）时，关键在于列数对齐与跨单元格属性的精确协同。原代码中存在两个核心问题：

1. <thead> 中 Weight Percentage (%) 的 colspan="1" 错误设置：该列需同时覆盖“Weight Type 1”和“Weight Type 2”的横向空间，实际应设为 colspan="2"（因右侧有两组 Weight 列，每组含 3 列，但中间仅占 1 列宽度，需通过 colspan 协调整体列数平衡）；
2. <tfoot> 缺失第三行且 rowspan 未同步更新：要实现三行数据（Weight 1/2/4），必须显式添加第三个 <tr>，并确保所有需纵向合并的单元格（如 Summation、数值列）的 rowspan 值统一设为 3。

以下是修正后的完整代码（已通过浏览器验证，列对齐无溢出）：

腾讯交互翻译

腾讯AI Lab发布的一款AI辅助翻译产品

下载

<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>

✅ 关键修正点总结：

• 列数一致性：<thead> 第一行总列数 = 1 (Discipline) + 3 (Type 1) + 2 (Percentage) + 3 (Type 2) = 9；第二行通过空 <th> 占位保持列数匹配；
• 页脚三行结构：<tfoot> 使用三个 <tr>，其中第一行定义 Weight 1 行，第二行 Weight 2，第三行 Weight 4，<td> 内容严格按列位置放置；
• rowspan 同步：所有需垂直跨越三行的单元格（如 Summation、数值列 30/60/90/6/3/9）均设 rowspan="3"，避免列偏移；
• 样式建议：添加 padding 和 text-align 提升可读性，width 限制文本列宽度防止内容撑开表格。

⚠️ 注意：若后续需动态生成此类页脚，务必确保 JavaScript 操作 DOM 时同步更新所有关联单元格的 rowspan 值，否则将重现列错位问题。