如何修改表格页脚Weight Percentage列，将其设为空白区域？

要把页脚中Weight Percentage列下的三行内容设为空白，只需将该区域的单元格合并成一个跨3行、2列的空白单元格，替换掉原来的三行对应内容即可。

修改后的完整代码如下：

CSS #

.table th, td {
  border: 1px solid black;
}

HTML #

<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>
      <!-- 合并为跨3行2列的空白单元格 -->
      <td colspan="2" rowspan="3"></td>
      <td rowspan="3">6</td>
      <td rowspan="3">3</td>
      <td rowspan="3">9</td>
    </tr>
  </tfoot>
</table>

说明 #

• 原页脚中对应Weight Percentage的三行<td>内容被替换成一个colspan="2" rowspan="3"的空白单元格，占据了原本的2列3行区域，实现空白效果。
• 同时移除了原tfoot中多余的两行<tr>，因为合并单元格后无需再单独编写这两行内容。

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