JSFiddle - React, Tailwind, and code Playground

by ChrisStanyon

HTML

<table id="tblEssentialTraining" class="tcDefaultTable">
  <colgroup>
    <col>
    <col>
    <col>
    <col>
    <col>
    <col>
  </colgroup>
  <thead>
    <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;}
    
    


/* This is my default table styling I use (Mainly from other EEs) */
    
.tcDefaultTable {
    border-collapse: collapse;
    margin: 25px 0;
    font-size: 0.9em;
    min-width: 400px;
    border-radius: 5px 5px 0 0;
    overflow: hidden;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
    width: 800px;
    table-layout: fixed;
}

.tcDefaultTable thead tr {
    background-color: rgb(0,115,152);
    color: #ffffff;
    text-align: left;
    font-weight: bold;
}

.tcDefaultTable th,
.tcDefaultTable td {
    padding: 12px 15px;
    padding: 5px;
    text-align: left;
    width: 200px;
    border: 1px solid grey;
}

.tcDefaultTable tbody tr {
    border-bottom: 1px solid #dddddd;
}

.tcDefaultTable tbody tr:nth-child(even) {
    background: #f3f3f3;
}

.tcDefaultTable tbody {
    overflow: auto;
    height: 100px;
}