JSFiddle - React, Tailwind, and code Playground

by ChrisStanyon

HTML

<table id="tblEssentialTraining" class="tcDefaultTable">
  <thead>
    <colgroup>
      <col>
      <col>
      <col>
      <col>
      <col>
      <col>
    </colgroup>
    <tr>
      <td>Title</td>
      <td>Supplier</td>
      <td>Taken</td>
      <td>Expiry</td>
      <td>Pass/Fail</td>
      <td>Mark</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td rowspan="2">Fire Warden</td>
      <td>St Johns</td>
      <td>2020-11-05</td>
      <td></td>
      <td>True</td>
      <td></td>
    </tr>
    <tr>
      <td>St Johns</td>
      <td>2019-10-15</td>
      <td>2020-11-05</td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td>First Aider</td>
      <td colspan="5">No previous history</td>
    </tr>
    <tr>
      <td>DSE Assessor</td>
      <td colspan="5">No previous history</td>
    </tr>
  </tbody>
</table>

CSS

col:nth-child(1) { background-color: red; width: 140px; }
    col:nth-child(2) { background-color: green; width: 140px; }
    col:nth-child(3) { background-color: blue; width: 90px; }
    col:nth-child(4) { background-color: pink; width: 90px;}
    col:nth-child(5) { background-color: orange; width: 90px; }
    col:nth-child(6) { background-color: grey; width: 90px;}