Как разместить события в таблице HTML по времени

Question

Я пытаюсь разместить события в своей таблице HTML, однако я могу сделать это только с 15-минутными интервалами, поскольку каждая ячейка помечается каждые 15 минут.Я изменяю цвет фона для отображения, когда происходит событие.Я использую время начала и время окончания, полученные из базы данных.

Когда я хочу разместить событие с 8:30 до 12:30, он может выбрать ячейку с 8:30 и 12:30 и заполнить середину.Однако я не могу поставить что-либо между 8:30 и 8:45, так как нечего выбирать.Например, я хочу поместить событие с 8:35 до 12:25, однако некуда его поместить в селекторы идентификатора HTML.

Как разрешить HTML-таблице принимать интервалы, превышающие 15-минутные?Есть ли лучший способ поместить события в таблицу HTML, а не просто изменить цвет фона ячейки?

Так выглядит в настоящее время

Вот как это должно выглядеть

<tr id="4_RowTable">
<td id="r4days">Friday</td>
<td id="t_800_d_Friday"></td>
<td id="t_815_d_Friday"></td>
<td id="t_830_d_Friday" bgcolor="#0000FF"></td>
<td id="t_845_d_Friday" bgcolor="#0000FF"></td>
<td id="t_900_d_Friday" bgcolor="#0000FF"></td>
<td id="t_915_d_Friday" bgcolor="#0000FF"></td>
<td id="t_930_d_Friday" bgcolor="#0000FF"></td>
<td id="t_945_d_Friday" bgcolor="#0000FF"></td>
<td id="t_1000_d_Friday" bgcolor="#0000FF"></td>
<td id="t_1015_d_Friday" bgcolor="#0000FF"></td>
<td id="t_1030_d_Friday" bgcolor="#0000FF"></td>
<td id="t_1045_d_Friday" bgcolor="#0000FF"></td>
<td id="t_1100_d_Friday" bgcolor="#0000FF"></td>
<td id="t_1115_d_Friday" bgcolor="#0000FF"></td>
<td id="t_1130_d_Friday" bgcolor="#0000FF"></td>
<td id="t_1145_d_Friday" bgcolor="#0000FF"></td>
<td id="t_1200_d_Friday" bgcolor="#0000FF"></td>
<td id="t_1215_d_Friday" bgcolor="#0000FF"></td>
<td id="t_1230_d_Friday"></td>
<td id="t_1245_d_Friday"></td>
<td id="t_1300_d_Friday"></td>
<td id="t_1315_d_Friday"></td>
<td id="t_1330_d_Friday"></td>
<td id="t_1345_d_Friday"></td>
<td id="t_1400_d_Friday"></td>
<td id="t_1415_d_Friday"></td>
<td id="t_1430_d_Friday"></td>
<td id="t_1445_d_Friday"></td>
<td id="t_1500_d_Friday"></td>
<td id="t_1515_d_Friday"></td>
<td id="t_1530_d_Friday"></td>
<td id="t_1545_d_Friday"></td>
<td id="t_1600_d_Friday"></td>
<td id="t_1615_d_Friday"></td>
<td id="t_1630_d_Friday"></td>
<td id="t_1645_d_Friday"></td>
<td id="t_1700_d_Friday"></td>
<td id="t_1715_d_Friday"></td>
<td id="t_1730_d_Friday"></td>
<td id="t_1745_d_Friday"></td>
<td id="t_1800_d_Friday"></td>
<td id="t_1815_d_Friday"></td>
<td id="t_1830_d_Friday"></td>
<td id="t_1845_d_Friday"></td>

Answer 1

Вы можете использовать свойство CSS linear-gradient(), чтобы начинать / заканчивать синий цвет в другой позиции в ячейке.Используя ваш пример, если одна ячейка составляет 15 минут и мы хотим отображать время в виде 5-минутных интервалов, установите linear-gradient проценты примерно как 33%, 66% and 100%

<style>
  td {
    border: 1px solid #000;
  }
</style>
<table>
  <tr>
    <td style="background:blue">
      this cell means 8:30 to 8:45</td>
  </tr>
  <tr>
    <td style="background: linear-gradient(to right, 
               white 33%, blue 33% 66%, blue 66% 100%);">
      this cell means 8:35 to 8:45</td>
  </tr>
  <tr>
    <td style="background: linear-gradient(to right,
               white 33%, white 33% 66%, blue 66% 100%);">
      this cell means 8:40 to 8:45</td>
  </tr>
</table>