How to align text to below table cells-CodePudding

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 >
    <col >
    <col >
    <col >
    <col >
    <col >
    <col >
    <col >
    <col >
    <col >
    <col >
    <col >
    <col >
    <col >
    <col >
  </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>

CodePudding user response：

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 >
    <col >
    <col >
    <col >
    <col >
    <col >
    <col >
    <col >
    <col >
    <col >
    <col >
    <col >
    <col >
    <col >
    <col >
  </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>

CodePudding user response：

I created a quick and dirty solution for this. I added and styled some strong tags around your numbers.

strong{
  padding-left:0.84rem;
}

<thead>
  <tr>
  <th colspan="7">Title row one<br>Sub Title - some text <br>Sub title<br>Sub Title<br></th>
  <th colspan="8"><br>Month   January           2022<br>Day<br> <div style="display:flex; justify-content: end;"><strong style="margin-right:3rem;">Time:</strong><strong>11 </strong><strong>12</strong><strong> 13</strong><strong> 14 </strong><strong>15</strong><strong> 16</strong><strong> 17</strong> </div>
    </th>
  </tr>
</thead>