Table Footer With Three Split Row

Question

I am trying to create a table with the following custom format that has three rows under a column at the end:

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

What I want, under Weight Percentage column there will be three rows at a time. That means, it'll have something as follows:

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

For now, under Weight Type 2 area, one of the column Weight 4 is bound out of the table. That has to be adjusted to Weight 4 column. Tried myself, but unable to do it. Anything that I missed?

Answer 1

You have used colspan="1" instead of colspan="2" for the cells of Weight Percentage (%), which causes the 9 to be displayed outside the table since the last rows (since they are merged) now have one more column than the rest. Adjust the three colspan="1" and that problem should be fixed.

As for the third row, you need to actually add a third row (<tr>...</tr>) and then adjust the rowspan for the rows you want to merge in your 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>