Zweispaltige Tabelle erstellen

[Gunnar Bittersmann]

@@beatovich

Mit Verlaub, das ist doch Inhalt für eine dl Liste.

Ja, auch gut.

Und ganz einfach zu stylen:

dl
{
	display: grid;
	grid-template-columns: auto 1fr;
}

– fertig!

Na fast. Kommen noch die Rahmen dazu. Das Ganze in einen @supports (display: grid)-Block gepackt, damit beim Fallback (z.B. im IE) keine Rahmen erscheinen.

☞ Sieht dann so aus.

Zusätze:

• Mit dt { grid-column: 1 } und dd { grid-column: 2 } erhält man die (Zu)ordnung, auch wenn nicht auf jedes dt genau ein dd folgt und umgekehrt.
• Mit dl > div { display: contents } geht das mit dem Grid auch, wenn zusammengehörige dt/dd in divs gruppiert sind. (display: contents ist in Chrome und Safari noch fehlerhaft implementiert, sodass das u.U. negative Auswirkungen auf die Barrierefreiheit hat.)

LLAP 🖖