Responsive Tabelle

  • Wie erstelle ich eine responsive HTML-Tabelle?

Bei dieser Lösung wird eine horizontale Bildlaufleiste angezeigt, wenn der Bildschirm zu klein ist, um den gesamten Inhalt der Tabelle anzuzeigen.

Einfügen eines <div> Containerelements mit der Eigenschaft overflow-x:auto um <table>.

<div style="overflow-x:auto;"><table> ... </table></div>

PHP v8.1.22 Bludit PRO v3.15.0 TinyMCE v5.10.5

Beispiel: Responsive Tabelle

Durch Verändern der Breite des Browserfensters wird der Effekt sichtbar.

VornameNachnamePunktePunktePunktePunktePunktePunktePunkte
Jill Smith 50 50 50 50 50 50 50
Eve Jackson 94 94 94 94 94 94 94
Adam Johnson 67 67 67 67 67 67 67
Inhalt-in-Arbeit
  • xxxq Wie verhindere ich Zeilenumbrüche in einer responsiven HTML-Tabelle?

Mit white-space: nowrap; lässt sich ein HTML Zeilenumbruch via CSS verhindern.

Beispiel: Responsive Tabelle mit Zeilenumbruch

table {
    white-space: normal;
}

Durch Verändern der Breite des Browserfensters wird der Effekt sichtbar.

FirmaVornameNachnameLandPunktePunktePunkte
Alfreds Futterkiste Jill Smith Germany 50 50 50
Berglunds snabbköp Eve Jackson Sweden 94 94 94
Centro comercial Moctezuma Adam Johnson Mexico 67 67 67

Beispiel: Responsive Tabelle ohne Zeilenumbruch

table {
    white-space: nowrap;
}

Durch Verändern der Breite des Browserfensters wird der Effekt sichtbar.

FirmaVornameNachnameLandPunktePunktePunkte
Alfreds Futterkiste Jill Smith Germany 50 50 50
Berglunds snabbköp Eve Jackson Sweden 94 94 94
Centro comercial Moctezuma Adam Johnson Mexico 67 67 67
Inhalt-in-Arbeit
Details

Suchindex