1

从头开始构建面积图。我在顶部有 X 轴，需要为每个时间条目包装“AM”和“PM”限定符，使其低于每个单元格中的时间。我无法更改单元格的大小。TD 宽度在 CSS 中设置为 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 都有一个类，因为我需要稍后单独调用每个类进行计算）

4

1 回答 1

0

由于您已经为每个 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>

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

Jsfiddle 中的演示

于 2013-03-25T20:03:11.287 回答