HTML-таблица: визуализировать горизонтальное двоичное дерево через диапазон строк? ⇐ CSS

[Anonymous]

Я хотел бы создать следующее представление двоичного дерева с помощью элемента таблицы HTML (изображение ниже было создано в редакторе изображений, а не в реальном HTML):


Учитывая мой предыдущий опыт работы с colspan успешно создает подобные вертикальные деревья, похоже, это вполне возможно, используя атрибут rowspan с чем-то вроде следующего кода:

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

1
2
4


3
5


6


7

Однако результат приведенного выше кода не отображается так, как ожидалось, ни в одной из последних версий каждого современного браузера, который я пробовал (Chrome, Safari, Firefox, Brave):


Я что-то делаю неправильный? Возможно ли это с помощью таблицы HTML? Вроде так и должно быть, но не работает...

Примечания:

• Мне бы очень хотелось, если это возможно, использовать таблицу HTML.
• На самом деле я хочу расширить это дерево, включив в него больше поколений (возможно, даже до 10 или 12 или около того), поэтому в идеале для этого подойдет любое решение.
  
  Я экспериментировал с новые (-иш) функции «CSS Grid» — хороший инструмент, но CSS Grid, похоже, плохо подходит для расширения такого дерева на многие поколения, поскольку кажется, что каждая ячейка сетки требует явной спецификации CSS Grid-row-start чтобы правильно разместить его в нужной строке дерева (а не просто перемещаться в следующую доступную естественную позицию, как в таблицах HTML). Если я расширю эту древовидную диаграмму на поколения, содержащие сотни или тысячи ячеек, то объявление явных значений Grid-row-start для каждой ячейки покажется непрактичным (или, по крайней мере, крайне нежелательным).
  < /li>

Подробнее здесь: https://stackoverflow.com/questions/759 ... ia-rowspan