如何将文本与下表单元格对齐

Question

我在下面汇总了一个粗略的模板，说明了我在下面每个尝试的内容。如何使右侧的数字与下方的小方块对齐？

我想我需要通过删除所有边框等并使用 css 来创建“不可见的单元格”。这是正确的方法还是有更简单的方法？

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>

Answer 1

只需将它们排成一排，并将它们放在各自的<th> 中。如果您不希望它们可见，您可以随时使用 CSS 移除每个边框。

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

Answer 2

我为此创建了一个快速而肮脏的解决方案。我在您的数字周围添加并设置了一些强有力的标签。

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>