[FIXED] How to align text to below table cells

Issue

I have put together the below a rough template of what im trying to each below. How Can I make the numbers on the right align with the small squares underneath?

I imagine I need to create 'invisible cells' by removing all the borders etc and playing around with the css. Would this be the right approach or is there an easier method?

https://jsfiddle.net/Elbusta/8720rhdq/18/

/* styles */

table {
  border: 1px solid black;
}

thead tr {
  text-align: left;
  vertical-align: top;
  border: 1px solid black;
}

td {
  text-align: left;
  vertical-align: top;
  border: 1px solid black;
}

th {
  text-align: left;
  vertical-align: top;
  border: 1px solid black;
}

span {
  float: right;
}

.time-cell {
  width: 26px;
}

<table style="undefined;table-layout: fixed; width: 577px">
  <colgroup>
    <col class="time-cell">
    <col class="time-cell">
    <col class="time-cell">
    <col class="time-cell">
    <col class="time-cell">
    <col class="time-cell">
    <col class="time-cell">
    <col class="time-cell">
    <col class="time-cell">
    <col class="time-cell">
    <col class="time-cell">
    <col class="time-cell">
    <col class="time-cell">
    <col class="time-cell">
    <col class="time-cell">
  </colgroup>
  <thead>
    <tr>
      <th colspan="8"><br>Month January 2022<br>Day<br>time 11 12 13 14 15 16 17</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>13:00</td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td>15:00</td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td>16:00</td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td>13:00</td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td>15:00</td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td>16:00</td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </tbody>
</table>

Solution

Just put them in a row and each in their own <th>. You can always use CSS to remove the border on each if you don't want them visible.

/* styles */

table {
  border: 1px solid black;
}

thead tr {
  text-align: left;
  vertical-align: top;
  border: 1px solid black;
}

td {
  text-align: left;
  vertical-align: top;
  border: 1px solid black;
}

th {
  text-align: left;
  vertical-align: top;
  border: 1px solid black;
}

span {
  float: right;
}

.time-cell {
  width: 26px;
}

<table style="undefined;table-layout: fixed; width: 577px">
  <colgroup>
    <col class="time-cell">
    <col class="time-cell">
    <col class="time-cell">
    <col class="time-cell">
    <col class="time-cell">
    <col class="time-cell">
    <col class="time-cell">
    <col class="time-cell">
    <col class="time-cell">
    <col class="time-cell">
    <col class="time-cell">
    <col class="time-cell">
    <col class="time-cell">
    <col class="time-cell">
    <col class="time-cell">
  </colgroup>
  <thead>
    <tr>
      <th colspan="8"><br>Month January 2022<br>Day</th>
    </tr>
    <tr>
      <th>time</th>
      <th>11</th>
      <th>12</th>
      <th>13</th>
      <th>14</th>
      <th>15</th>
      <th>16</th>
      <th>17</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>13:00</td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td>15:00</td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td>16:00</td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td>13:00</td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td>15:00</td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td>16:00</td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </tbody>
</table>

Answered By - Dave

Answer Checked By - Mildred Charles (PHPFixing Admin)