display: table; bei overflow neue table-row

[Fir Kay]

Hey,

ich habe aktuell ein Menü, welches ich mit display: table (, table-row und table-cell) über CSS gestaltet habe.

.table {
display: table;
}

.table-row {
display: table-row;
}

.table-cell {
display: table-cell;
}

Das Problem ist nun, wenn das Fenster zu klein gezogen wird, dass sich der Inhalt in den Zellen umbricht.

Gibt es eine Möglichkeit, dass anstatt des Zeilenumbruchs eine neue Tabellen-Zeile angefangen wird? Also, dass dann manche der Zellen in eine neue Zeile rutschen?

Mit Grüßen,
Simon

 

[threadi]

Ergänze noch

.table-cell { white-space: nowrap; }

beachte dabei jedoch, dass die Tabelle dadurch sich nicht mehr auf den kleineren Viewport verkleinert. Ein Nutzer müsste dann horizontal scrollen um die Tabelle komplett sehen zu können.

 

[Fir Kay]

Ok, so wollte ich das auch nicht haben. Vielleicht hätte ich dazu noch erwähnen soll, dass eine neue Zeile entstehen soll. Ich wollte da eher den Mobilbereich ansprechen. Die Menüpunkte sollen dadurch dann untereinander sein, wenn der Bildschirm nicht breit genug ist. Aber trotzdem danke für die Antwort.

 

[threadi]

Wie gesagt: ein Link zur Seite wäre hilfreicher.

 

[Fir Kay]

Ich wüsste zwar nicht, wie das in diesem Fall hilft, aber dies http://root.simonknittel.de/dev/dev.htm entspricht genau dem Menü.