Wrap AM & PM на равных расстояниях <td> s

Построение диаграммы области с нуля. У меня есть ось X сверху и вам нужно обернуть квалификатор «AM» & «PM» для каждой записи времени, чтобы он был ниже времени в каждой ячейке. Однако я не могу изменить размер ячеек. Ширина TD установлена на 4% в CSS (всего 25 временных сегментов, это сохраняет их равномерно, когда я меняю размер окна), и я намерен выполнять вычисления, где начинается каждая ячейка. & заканчивается, чтобы определить координаты штрихов на холсте, которые будут идти ниже.Wrap AM & PM на равных расстояниях <td> s

Итак, есть ли способ обернуть каждый из них?

Ex:

12:00 1:00 
    PM PM

С шириной, установленной на 4%, я заметил, что она оборачивает ту, с двузначным числом. Я действительно не хочу ставить 0s перед каждой одноразрядной записью времени, хотя.

Код:

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

(Каждый тд имеет класс, потому что мне нужно позвонить каждый из них по отдельности позже для расчетов)

источник

2013-03-25 Lorenzo

Я не думаю, что есть способ * сила * линия разрыв внутри элемента без внутренней разметки, в CSS. Вы можете разрешать или запрещать перерывы, но не форсировать их. Есть ли причина, по которой вы не можете просто добавить теги '
' в разметку? –

Я не знаю, почему я раньше этого не делал. Я добавил разрывы для каждого из них и, похоже, работает, независимо от того, как я изменяю размер окна. Спасибо Юкке. Забавно, что вы прокомментировали это, я действительно читал сообщение на другом форуме, который вы делали год назад, прежде чем я пришел сюда, чтобы опубликовать это. – Lorenzo

Поскольку у вас есть уже другой класс для каждого тд, вы могли бы написать что-то наподобие

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

источник

2013-03-25 20:03:11 vals

Wrap AM & PM на равных расстояниях <td> s

ответ

Смежные вопросы