Wat het is
Een tabel met veel kolommen, of eentje gebouwd met vaste in plaats van flexibele maten, is van nature breed — wat prima is op een desktopscherm, maar krimpt niet mee om te passen op een veel smaller telefoonscherm zoals de meeste andere inhoud op een goed gebouwde pagina wel doet. In plaats daarvan dwingt het ofwel de hele pagina om zijwaarts te scrollen, of wordt het ongemakkelijk samengeknepen en moeilijk leesbaar.
Waarom het belangrijk is
Zijwaarts scrollen is een van de meer storende dingen waar een bezoeker op een telefoon tegenaan kan lopen — het doorbreekt het normale op-en-neer scrollpatroon dat mensen overal elders op het web verwachten, en het is makkelijk om content die net buiten beeld rechts staat écht te missen zonder te beseffen dat hij er is. Op een verder perfect mobielvriendelijke pagina kan één brede, niet-omwikkelde tabel het enige zijn dat de hele ervaring kapot laat aanvoelen voor een mobiele bezoeker.
Hoe je het oplost
- Identificeer welke tabellen op je site veel kolommen hebben of zijn gebouwd met vaste pixelbreedtes in plaats van flexibele.
- Wikkel elke brede tabel in een container met de CSS-eigenschap
overflow-x: auto— dit houdt de eigen lay-out van de tabel intact, maar laat een bezoeker alleen die tabel zijwaarts scrollen met een vingerswipe, in plaats van dat de hele pagina verschuift. - Overweeg voor tabellen met veel kolommen in plaats daarvan een responsief tabelpatroon — bijvoorbeeld door elke rij op smalle schermen te stapelen in zijn eigen gelabelde kaart in plaats van op elke grootte het traditionele rasterontwerp aan te houden.
- Als je een websitebouwer gebruikt, controleer dan of het tabelblok al een "mobiel scrollen"- of "responsief"-schakelaar heeft voordat je een aangepaste oplossing bouwt.
- Test de oplossing op een echt smal telefoonscherm (of de mobiele voorvertoningsmodus van je browser), niet alleen door een desktopbrowservenster te verkleinen, aangezien aanraakscrollen anders werkt dan een muis.