Question

从头开始构建面积图。我的X轴在顶部，需要包裹“AM”和＆amp;每个时间条目的“PM”限定符，使其低于每个单元格中的时间。我不能改变细胞的大小。在CSS中将TD宽度设置为4％（总共25个时间段，当我改变窗口大小时，这使它们保持相等的间距）并且我打算在每个单元开始的位置进行计算。结束以确定画布上下方的笔画坐标。

那么有没有办法包装每一个？

例如：

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都有一个类，因为我需要稍后再单独调用它们进行计算）

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

包裹AM＆amp; PM在等间距s中

1 个答案: