JSFiddle - React, Tailwind, and code Playground

HTML

Col-spanning cell
<table>
  <col style="background-color:red;">
  <col style="background-color: blue;">
  <col style="background-color: green;">
  <tr>
    <td>okay then</td>
    <td>okay then</td>
    <td>okay then</td>
  </tr><tr>
    <td colspan="2">Sum: $180</td>
    <td>okay then</td>
  </tr>
</table>

Col-spanning cell that starts in a collapsed column
<table>
  <col style="background-color:red; visibility: collapse;">
  <col style="background-color: blue;">
  <col style="background-color: green;">
  <tr>
    <td>okay then</td>
    <td>okay then</td>
    <td>okay then</td>
  </tr>
  <tr>
    <td colspan="2">Sum: $180</td>
    <td>okay then</td>
  </tr>
</table>

Row-spanning cell
<table>
  <col style="background-color:red;">
  <col style="background-color: blue;">
  <col style="background-color: green;">
  <tr>
    <td rowspan="2">Sum: $180</td>
    <td>okay then</td>
    <td>okay then</td>
  </tr>
  <tr>
    <td>okay then</td>
    <td>okay then</td>
  </tr>
</table>
Row-spanning cell that starts in a collapsed row
<table>
  <col style="background-color:red;">
  <col style="background-color: blue;">
  <col style="background-color: green;">
  <tr style="visibility:collapse">
    <td rowspan="2">Sum: $180</td>
    <td>okay then</td>
    <td>okay then</td>
  </tr>
  <tr>
    <td>okay then</td>
    <td>okay then</td>
  </tr>
</table>

CSS

<style>
    table {
      border: 5px solid black;
    }
    table span {
        display: inline-block;
        vertical-align: top;
        background: lime;
        margin: 3px;
        height: 100px;
        width: 100px;
    }
</style>