css 三行拆分的表尾

rqenqsqc 于 2023-01-27 发布在其他

关注(0)|答案(1)|浏览(142)

我正在尝试创建一个具有以下自定义格式的表，该表在末尾的一列下包含三行：

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

<table class="table">
  <thead>
    <tr>
      <td rowspan="2">Discipline</td>
      <th colspan="3">Weight Type 1</th>
      <th colspan="1" 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 colspan="1">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="1">100</td>
      <td>4</td>
      <td>2</td>
      <td>6</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td rowspan="2">
        <b>Summation</b>
      </td>
      <td rowspan="2">30</td>
      <td rowspan="2">60</td>
      <td rowspan="2">90</td>
      <td style="width: 20px;">Weight 1</td>
      <td style="width: 20px;">X</td>
      <td rowspan="2">6</td>
      <td rowspan="2">3</td>
      <td rowspan="2">9</td>
    </tr>
    <tr>
      <td>Weight 2</td>
      <td>Y</td>
    </tr>
  </tfoot>
</table>

我想要的是，在权重百分比列下，一次有三行，也就是说，它会有如下内容：

Weight 1 - 20
Weight 2 - 40
Weight 4 - 60

目前，在权重类型2区域下，有一列权重4被绑定到表外。必须调整到权重4列。我自己尝试过，但无法做到。我错过了什么？

css

来源：https://stackoverflow.com/questions/75254929/table-footer-with-three-split-row

1条答案

按热度按时间

krcsximq1#

对于Weight Percentage (%)的单元格，您使用了colspan="1"而不是colspan="2"，这导致9显示在表外，因为最后一行（因为它们已合并）现在比其余行多一列。调整三个colspan="1"，该问题应得到解决。
至于第三行，您实际上需要添加第三行（<tr>...</tr>），然后调整rowspan，使之适合您要在tfoot中合并的行。

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

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

赞(0）回复(0）举报 2023-01-27

我来回答

css 三行拆分的表尾

1条答案

相关问题

热门标签

最新问答