Нарисуйте сепараторы линии на сетке ⇐ CSS

[Anonymous]

Я работаю над диаграммой Гантта, но ради этого вопроса, пытаясь выяснить, как добавить вертикальные линии к следующему элементу, с заполнителями вместо фактических элементов: < /p>

Код: Выделить всё

Column 1
Column 2
Column 3 (Month 1)
Column 4 (Month 2)
Column 5 (Month 2)

Data 1.1Data 2.1Data 3.1 (bar)
Data 1.2Data 2.2Data 3.2 (bar)
Data 1.3Data 2.3Data 3.3 (bar)

, который воспроизводит:

, которые до сих пор не будут разглашением между линейками, которые до сих пор не затрагивают линейки, которые будут между lines, которые будут запланировать линии. Месяцы, со следующими двумя заключенными. /> Моя идея заключалась в том, чтобы противостоять сетке с абсолютным позиционированием, но унаследовать ширину столбца своего родителя, что -то вроде: < /p>

Код: Выделить всё

*+*]:border-s-1 [&>*+*]:border-gray-300">


< /code>
Но, хотя новая сетка занимает полную площадь моей диаграммы Gantt, она отображает только 1 столбец. Проблема более заметна, если элементам дается цвет фона вместо левой границы, поэтому мой код далеко: < /p>


Column 1
Column 2
Column 3 (Month 1)
Column 4 (Month 2)
Column 5 (Month 2)

Data 1.1Data 2.1Data 3.1 (bar)
Data 1.2Data 2.2Data 3.2 (bar)
Data 1.3Data 2.3Data 3.3 (bar)

*:nth-child(odd)]:bg-blue-300/50">

и он рендерирует с наложенным div s, организованными в строках полной ширины вместо полных столбцов:


Подробнее здесь: https://stackoverflow.com/questions/797 ... rid-layout