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