Responsive Tabellen

Tabellen sind besonders in der Portrait (Hochformat)-Ansicht auf kleinen Endgeräten wie dem IPhone nicht gut zu lesen.

Eine einfache Lösung wird durch Zufügen von etwas CSS-Code erreicht:

/* Tabellen horizontral scrollbar machen */
@media screen and (max-width: 640px) {
    table {
        overflow-x: auto;
        display: block;
    }
}

Der Wert für die maximale Breite (max-width: 640px) lässt sich bei Bedarf anpassen.

Einbau des Codes:
In einigen Themes gibt es bereits eine Stylesheet-Datei (z. B.: style.responsive.css). Hier wird die Code-Ergänzung beispielsweise am Ende zugefügt. Bei einem Theme-Update (Wechsel) muss der CSS-Code erneut eingefügt werden!

Zum Einbau des zusätzlichen CSS-Codes kann ab WordPress 4.7 der Customizer genutzt werden.

Nach der Code-Ergänzung lassen sich breitere Tabellen im IPhone u. a. mit dem Finger waagrecht scrollen.