css - 将 AM 和 PM 包裹在等间距的 中

Question

从头开始构建面积图。我的 X 轴在顶部，需要为每个时间条目包装“AM”和“PM”限定符，以便它低于每个单元格中的时间。我不能改变单元格的大小。 TD 宽度在 CSS 中设置为 4%(总共 25 个时间段，当我更改窗口大小时这使它们保持等距)并且我打算计算每个单元格开始和结束的位置以确定 Canvas 上的笔画坐标往下看。

那么有没有办法把每一个都包裹起来呢？

例如:

12:00  1:00
  PM    PM

将宽度设置为 4%，我注意到它用两位数包裹了宽度。不过，我真的不想在每个一位数的时间条目前加上 0。

代码:

<table id="timeline">
<tr>
    <td class="0">12:00 AM</td><td class="1">1:00 AM</td><td class="2">2:00 AM</td><td class="3">3:00 AM</td><td class="4">4:00 AM</td><td class="5">5:00 AM</td><td class="6">6:00 AM</td><td class="7">7:00 AM</td>
    <td class="8">8:00 AM</td><td class="9">9:00 AM</td><td class="10">10:00 AM</td><td class="11">11:00 AM</td><td class="12">12:00 PM</td><td class="13">1:00 PM</td><td class="14">2:00 PM</td><td class="15">3:00 PM</td>
    <td class="16">4:00 PM</td><td class="17">5:00 PM</td><td class="18">6:00 PM</td><td class="19">7:00 PM</td><td class="20">8:00 PM</td><td class="21">9:00 PM</td><td class="22">10:00 PM</td><td class="23">11:00 PM</td>
    <td class="24">12:00 AM</td>
</tr>

(每个td都有一个类，因为我需要稍后单独调用每个td进行计算)

Answer 1

因为你已经为每个 td 设置了一个不同的类，你可以这样写

td:after {
    top: 20px;
    left: -25px;
    position: relative;
}

.c0:after {
   content: "PM"; 
}

.c1:after, 
.c2:after,
.c3:after {
    content: "AM"; 

}

也就是说，将 AM 和 PM 标签生成为伪元素，样式设置为在真实的 td 下。

表格从 AM/PM 文本中剥离:

<table id="timeline">
<tr>
<td class="c0">12:00</td>
<td class="c1">1:00</td>
<td class="c2">2:00</td>

我更改了类名，使它们以字母开头。

Demo in Jsfiddle