如何实现表格页脚拆分行并合并居中Weight Percentage列？

修改后的完整代码 #

CSS 样式

.table {
  border-collapse: collapse; /* 合并边框，避免重复线条 */
  width: 100%; /* 可选，让表格占满容器宽度 */
}
.table th, .table td {
  border: 1px solid black;
  text-align: center; /* 全局设置单元格内容居中 */
  padding: 8px; /* 可选，增加内边距提升美观度 */
}

HTML 表格

<table class="table">
    <col />
    <colgroup span="2"></colgroup>
    <col /> <!-- 单独定义Weight Percentage列的列规则 -->
    <colgroup span="2"></colgroup>
    <thead>
        <tr>
            <td rowspan="2" scope="colgroup">Discipline</td>
            <th colspan="2" scope="colgroup">Weight Type 1</th>
            <!-- 合并表头两行，直接显示列标题并居中 -->
            <th rowspan="2" scope="colgroup">Weight Percentage (%)</th>
            <th colspan="2" scope="colgroup">Weight Type 2</th>
        </tr>
        <tr>
            <th scope="col">Weight 1</th>
            <th scope="col">Weight 2</th>
            <!-- 移除原第二行的重复表头，已被上方单元格覆盖 -->
            <th scope="col">Weight 1</th>
            <th scope="col">Weight 2</th>
        </tr>
    </thead>
    <tbody>
        <tr style="background-color: white;">
            <th scope="row">Discipline 1</th>
            <td>10</td>
            <td>20</td>
            <td>100</td>
            <td>2</td>
            <td>1</td>
        </tr>
        <tr style="background-color: white;">
            <th scope="row">Discipline 2</th>
            <td>20</td>
            <td>40</td>
            <td>100</td>
            <td>4</td>
            <td>2</td>
        </tr>
    </tbody>
    <tfoot>
        <!-- 第一行：除目标列外，其他单元格跨两行合并 -->
        <tr>
            <td rowspan="2"><b>Summation</b></td>
            <td rowspan="2">30</td>
            <td rowspan="2">60</td>
            <td>拆分内容1</td> <!-- 拆分行第一部分 -->
            <td rowspan="2">6</td>
            <td rowspan="2">3</td>
        </tr>
        <!-- 第二行：仅保留目标列的第二部分内容 -->
        <tr>
            <td>拆分内容2</td> <!-- 拆分行第二部分 -->
        </tr>
    </tfoot>
</table>

关键修改说明 #

1. Weight Percentage列表头合并居中

   • 把thead第一行的空表头替换为rowspan="2"的单元格，直接写入列标题，配合CSS的text-align: center实现居中显示。
   • 删除原第二行对应的重复表头，因为上方单元格已经跨两行覆盖了该位置。

2. 页脚拆分行实现

   • 在tfoot中新增两行：第一行给除目标列外的所有单元格设置rowspan="2"，确保合计值跨两行显示；第二行只保留目标列的单元格，填入拆分后的第二部分内容。

内容的提问来源于stack exchange，提问作者user8512043