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