自定义表格问题：Weight Percentage列需拆分为三行，修复Weight 4列溢出

核心问题 #

1. 列数不匹配：表头（thead）总共定义了8列，但页脚（tfoot）的第一行多写了1个单元格，导致表格列结构混乱，Weight Type 2的Weight 4列被挤出表格范围。
2. 单元格rowspan设置错误：Weight Percentage列需要显示3行内容，但当前tfoot中相关单元格的rowspan仅设为2，无法适配三行的高度需求。

修复后的代码 #

CSS 代码 #

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

HTML 代码 #

<table class="table">
  <thead>
    <tr>
      <td rowspan="2">Discipline</td>
      <th colspan="3">Weight Type 1</th>
      <th rowspan="2">Weight Percentage (%)</th>
      <th colspan="3">Weight Type 2</th>
    </tr>
    <tr>
      <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>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>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>

修复说明 #

• 将tfoot中所有跨多行的单元格rowspan改为3，适配Weight Percentage列的三行内容高度。
• 删除tfoot中多余的单元格，确保整个表格列数统一为8列，解决Weight 4列超出的问题。
• 在Weight Percentage列对应的单元格中添加需求的三行内容：Weight 1 - 20、Weight 2 - 40、Weight 4 - 60。

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