Verschachtelte Tabelle mit Tabellenlayout

[heinetz]

@@heinetz

Ich hab da mal mit Floats rumgemacht.

Das entspricht im Prinzip meinem Versuch hier:

Jetzt habe ich noch eine andere relativ einfache Lösung gefunden und hier umgesetzt. Charmant daran ist, dass relativ wenig fixe Werte verwendet werden. Mir ist, ehrlich gesagt, etwas mulmig damit zumute, weil ich das Verhalten logisch nicht nachvollziehen kann.

Ist das ein Zufallsprodukt oder entspricht das Verhalten den CSS-Standards?

… und damit betrachte ich meine Frage als beantwortet.

Problematisch:

Ich denke, all das lässt sich mit relativ überschaubarem Aufwand in den den Griff kriegen.

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

Das Menü wird in einem Bootstrap-Grid angezeigt. Ich glaube, damit wird es relativ unproblematisch, das Ganze responsive zu machen.

• 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

Das kriegt man in den Griff, wenn man sich um die Trennlinien kümmert.

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

Dazu habe ich den li.has-children einfach 100% und dem umschliessenden Container ul.menu eine feste Höhe gegeben. Diese Höhe lässt sich relativ einfach mit ein paar Zeilen JS errechnen.

danke, das wird mein Weg

gruss, heinetz