Table Footer With Two Split Row-CodePudding

I've created a table with the following custom format:

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

<table >
    <col />
    <colgroup span="2"></colgroup>
    <colgroup span="2"></colgroup>
    <thead>
        <tr>
            <td rowspan="2" scope="colgroup">Discipline</td>
            <th colspan="2" scope="colgroup">Weight Type 1</th>
            <th colspan="1"></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 Percentage (%)</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>
                <b>Summation</b>
            </td>
            <td>30</td>
            <td>60</td>
            <td></td>
            <td>6</td>
            <td>3</td>
        </tr>
    </tfoot>
</table>

My plan is to create the footer section under Weight Percentage column as the following sample and in the same time, merge and centre the Weight Percentage column:

Is it something possible to create? I tried with rowspan and colspan, but seems like require bit more assistance here.

CodePudding user response：

Yes it is possible with rowspan and colspan, but you need to define extra rows and cols which can then be merged as needed.

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

<table >
  <thead>
    <tr>
      <td>Discipline</td>
      <th colspan="2">Weight Type 1</th>
      <th colspan="2" rowspan="2" style="border-top:none;">Weight Percentage (%)</th>
      <th colspan="2">Weight Type 2</th>
    </tr>
    <tr>
      <th></th>
      <th>Weight 1</th>
      <th>Weight 2</th>
      <th>Weight 1</th>
      <th>Weight 2</th>
    </tr>
  </thead>
  <tbody>
    <tr style="background-color: white;">
      <th>Discipline 1</th>
      <td>10</td>
      <td>20</td>
      <td colspan="2">100</td>
      <td>2</td>
      <td>1</td>
    </tr>
    <tr style="background-color: white;">
      <th>Discipline 2</th>
      <td>20</td>
      <td>40</td>
      <td colspan="2">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 style="width: 80px;">Weight 1</td>
      <td style="width: 80px;">X</td>
      <td rowspan="2">6</td>
      <td rowspan="2">3</td>
    </tr>
    <tr>
      <td>Weight 2</td>
      <td>Y</td>
    </tr>
  </tfoot>
</table>