Gunnar Bittersmann: Verschachtelte Tabelle mit Tabellenlayout

Beitrag lesen

@@heinetz

Screenshot

Das will ich aus der o.g. HTML-Struktur erzeugen.

Ich hab da mal mit Floats rumgemacht.

Problematisch:

  • nicht wirklich responsive, bei schmalem Viewport Kraut und Rüben

  • die Höhe der .has-no-children zusammen darf nicht höher sein als die des letzten .has-children, sonst rutschen die Items darunter, Kraut und Rüben

  • die Trennlinien gehen nicht über die ganze Höhe, sondern sind nur so hoch wie das jeweils höhere Items links und rechts davon

Auch mit Flexbox hab ich noch nichts zaubern können. Um mit diesem Markup diese Darstellung zu erzeugen, braucht man wohl CSS Grid. Oder Nachhilfe mit JavaScript.

LLAP 🖖

--
“The best way to help people learn: answer their coding question an hour later, they’ll have likely figured it out by then.” —Todd Motto
Selfcode: sh:) fo:} ch:? rl:) br:> n4:& va:| de:> zu:} fl:{ ss:| ls:# js:|