Was es ist
Eine Tabelle mit vielen Spalten oder eine, die mit festen statt flexiblen Maßen gebaut wurde, ist von Natur aus breit – das ist am Desktop-Bildschirm kein Problem, schrumpft aber nicht auf einen viel schmaleren Handybildschirm, so wie es die meisten anderen Inhalte einer gut gebauten Seite tun. Stattdessen zwingt sie entweder die ganze Seite zum seitlichen Scrollen oder wird unangenehm zusammengequetscht und schwer lesbar.
Warum es wichtig ist
Seitliches Scrollen gehört zu den unangenehmsten Dingen, auf die ein Besucher auf dem Handy stoßen kann – es durchbricht das gewohnte Auf-und-ab-Scrollmuster, das überall sonst im Web erwartet wird, und es ist leicht, Inhalte, die gerade außerhalb des sichtbaren Bereichs rechts liegen, komplett zu übersehen, ohne überhaupt zu bemerken, dass sie da sind. Auf einer ansonsten perfekt handyfreundlichen Seite kann eine einzige breite, nicht umbrochene Tabelle das eine sein, was das gesamte Erlebnis für einen mobilen Besucher kaputt wirken lässt.
So behebst du es
- Identifiziere, welche Tabellen auf deiner Website viele Spalten haben oder mit festen Pixelbreiten statt flexiblen Maßen gebaut wurden.
- Packe jede breite Tabelle in einen Container mit der CSS-Eigenschaft
overflow-x: auto– das erhält das Layout der Tabelle, erlaubt aber, nur diese eine Tabelle mit einer Wischbewegung seitlich zu scrollen, statt die ganze Seite zu verschieben. - Bei Tabellen mit sehr vielen Spalten erwäge stattdessen ein responsives Tabellenmuster – zum Beispiel jede Zeile auf schmalen Bildschirmen in eine eigene, beschriftete Karte zu verwandeln, statt bei jeder Größe am klassischen Rasterlayout festzuhalten.
- Nutzt du einen Website-Baukasten, prüfe, ob dessen Tabellenblock bereits einen Schalter für „mobiles Scrollen" oder „responsiv" hat, bevor du eine eigene Lösung baust.
- Teste den Fix auf einem echten schmalen Handybildschirm (oder im mobilen Vorschaumodus deines Browsers), nicht nur durch Verkleinern eines Desktop-Browserfensters, da sich Touch-Scrolling anders verhält als eine Maus.