I don’t wanna flex, but ... (flex bei td-Element anwenden)

[borisbaer]

Hallo zusammen,

um meine Tabelle auch auf kleinem Viewport gut anzeigen zu können, habe ich (bis max-width: 720px) die Tabellenzellen des tbody mit einem display: flex versehen. Ich kann mir zwar vorstellen, dass es kurios ist, dies bei einem Tabellen-Element zu machen, aber es war die einzige Möglichkeit, das, was ich bezwecken wollte, umzusetzen.

tbody td {
	display: flex;
	align-items: center;
	width: auto !important;
	padding: 0 !important;
	background: inherit !important;
	text-align: left !important;
	line-height: 1.5rem !important;
}

tbody td::before {
	content: attr(data-label);
	align-self: stretch;
	flex-shrink: 0;
	width: 30%;
	padding: .25rem .75rem;
	margin-right: .75rem;
	background: var(--bg 5);
	font-family: var(--font 2);
	letter-spacing: .09em;
}

Sobald die Seite zu klein wird, kommt das data-label zum Einsatz, um die Pseudo-Table-Headers links bei jedem Eintrag anzuzeigen. Ohne flexbox wurde bei zu langen Inhalten, der Überhang in der nächsten Zeile unter das Pseudo-Element geschoben und ich konnte das nicht verhindern.

Ich merke gerade, es ist echt schwierig, das zu erklären. Daher siehe problematische Seite.

Gibt es irgendetwas, das gegen die Verwendung von display: flex bei einem td-Element spricht?

Grüße
Boris

[Gunnar Bittersmann]

@@borisbaer

Sobald die Seite zu klein wird, kommt das data-label zum Einsatz, um die Pseudo-Table-Headers links bei jedem Eintrag anzuzeigen.

Da hast du aber viel Markup. Vielleicht sind die Codepens mit und ohne JavaScript und dieser Thread zu responsiven Tabellen was für dich.

🖖 Живіть довго і процвітайте

[borisbaer]

Hallo Gunnar,

Da hast du aber viel Markup. Vielleicht sind die Codepens mit und ohne JavaScript und dieser Thread zu responsiven Tabellen was für dich.

ja, da kommt bisschen was zusammen. Allerdings möchte ich gerne, dass es so aussieht, wie es das momentan tut, … und mit weniger war es nicht machbar.

Du hattest mir die beiden ersten Links schon mal angeraten und tatsächlich haben die mich überhaupt erst auf die Idee gebracht, dass man eine Tabelle so organisieren kann. Nur wollte ich eben, dass die Pseudo-Elemente als eine Art „feste Spalte“ fungieren. Das ging bei mir nur mit flex.

Da du dich nicht gegen die Verwendung von flex an dieser Stelle ausgesprochen hast, schätze ich, es spricht per se nichts dagegen, dies hier anzuwenden. Ein Workaround kenne ich nicht.

Den Thread schaue ich mir bei Gelegenheit auch mal genauer an, danke!

Grüße
Boris