Een HTML tabel responsive maken zodat deze op een mobile device goed wordt getoond hoort dus bij standaard web design. De vraag is natuurlijk, hoe maak je dus binnen bijvoorbeeld Elementor Builder of een WordPress thema zo’n tabel responsive?
Hoe maak je een HTML‑tabel responsive in WordPress?
Een praktische gids voor moderne websites
Responsieve tabellen blijven dus een uitdaging binnen WordPress, zeker wanneer je werkt met vaste kolommen of oudere content die niet automatisch schaalt op mobiele schermen. Gelukkig kun je dus met een paar slimme HTML‑aanpassingen je tabel perfect leesbaar maken op elk device — zonder plugins.
Een tabel responsive maken in WordPress met HTML
Tabellen zijn ideaal voor het tonen van gestructureerde informatie, maar op mobiele schermen lopen ze al snel uit beeld. In deze blog laat ik zien hoe je met bijvoorbeeld een kleine HTML‑aanpassing elke tabel responsive maakt — zelfs in de WordPress Block Editor. In het geval van de WordPress Block Editor laat ik zien hoe dit dus met CSS kan worden gestyled.
Waarom wordt een HTML-tabel niet automatisch responsive?
Standaard HTML‑tabellen hebben een vaste breedte. Wanneer de inhoud breder is dan het scherm, duwt de tabel de layout opzij. WordPress voegt geen automatische scroll of stacking toe, waardoor mobiele gebruikers horizontaal moeten scrollen of zelfs content missen.
Gelukkig is dit eenvoudig op te lossen.
Oplossing: plaats je tabel in een scrollbare container
Door je tabel te “wrappen” in een In HTML ziet het er dan als volgt uit. Je kunt deze HTML code in een tekst bestand plakken en het tekst bestand hernoemen van .txt naar .htm. Open dit htm bestand in de browser en verklein het scherm dusdanig dat de toolbar onder de tabel zichtbaar wordt. Eventueel via CTRL+SHIFT+I de development tools openen van de browser en via CTRL+SHIFT+M de device emulatie modus van de browser simuleren. Wil je de scrollbar verwijderen, dan haal je de volgende regels weg: Dit werkt echter anders in WordPress. Hier heb je maken met een Gutenberg-blockcode. Om zo’n Gutenberg-blockcode responsive te maken, kun je CSS gebruiken. Sommige Theme developers kunnen dit natuurlijk al in de CSS hebben toegevoegd. Als dat niet zo is, dan kun je CSS gebruiken. Aanbevolen is om hiervoor een Child theme te gebruiken. Als je dus een child thema gebruikt, dan kun je met een FTP programma zoals FileZilla een custom.css uploaden (pad /…/wp-content/themes/squaretype-child). In het geval van Squaretype Child, is het de style.css. Deze overschrijven de style.css in het hoofd thema. Voeg het volgende toe aan de CSS van het Child theme: Als je dan via de Code editor van WordPress gaat kijken, dan ziet het er iets anders uit. Het resultaat is dan als volgt. Via CLTRL+SHIFT+I + CTRL+SHIFT+M en door middel van het verplaatsen van de schuifbalk, wordt de scroll bar zichtbaar op een mobile device. Dat is dus precies zoals het hoort. Het resultaat is dan als volgt. Wil je meer weten over CSS en stylesheet, klik dan hier. Heb je vragen over deze blog post, neem dan contact met mij op via het contact formulier.overflow-x: auto, kan de gebruiker horizontaal scrollen wanneer dat nodig is. Dit is de meest veilige en compatibele methode.
Product
Prijs
Voorraad
Eenheid
Plectrum
10
10
Per 100
Snaren
20
15
Per set
Een HTML tabel responsive maken bij een Gutenberg-blockcode
Product Prijs per stuk Prijs per eenheid Voorraad Eenheid Plectrum 10 1 10 Per 100 Snaren 20 1 15 Per set .wp-block-table {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
display: block;
}
Product Prijs per stuk Prijs per eenheid Voorraad Eenheid Plectrum 10 1 10 Per 100 Snaren 20 1 15 Per set Product Prijs per stuk Prijs per eenheid Voorraad Eenheid Plectrum 10 1 10 Per 100 Snaren 20 1 15 Per set 
