Responsive Tabelle

    Wie erstelle ich eine Responsive 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.22Bludit PRO v3.15.0TinyMCE v5.10.5

    Beispiel: Responsive Tabelle

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

    Vorname Nachname Punkte Punkte Punkte Punkte Punkte Punkte Punkte
    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

    Quelle: https://www.w3schools.com/howto/howto_css_table_responsive.asp

    Zeilenumbruch verhindern

    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.

    Firma Vorname Nachname Land Punkte Punkte Punkte
    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.

    Firma Vorname Nachname Land Punkte Punkte Punkte
    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

    Quelle: https://www.designerinaction.de/tipps-tricks/web-development/html-zeilenumbruch/