HTML tabel responsive maken

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 <div> met overflow-x: auto, kan de gebruiker horizontaal scrollen wanneer dat nodig is. Dit is de meest veilige en compatibele methode.

In HTML ziet het er dan als volgt uit.

<div style="overflow-x: auto; -webkit-overflow-scrolling: touch;">
    <figure class="wp-block-table cnvs-block-core-table-1767278538637">
        <table class="has-fixed-layout">
            <thead>
                <tr>
                    <th class="has-text-align-left" data-align="left">Product</th>
                    <th class="has-text-align-left" data-align="left">Prijs</th>
                    <th class="has-text-align-left" data-align="left">Voorraad</th>
                    <th class="has-text-align-left" data-align="left">Eenheid</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td class="has-text-align-left" data-align="left">Plectrum</td>
                    <td class="has-text-align-left" data-align="left">10</td>
                    <td class="has-text-align-left" data-align="left">10</td>
                    <td class="has-text-align-left" data-align="left">Per 100</td>
                </tr>
                <tr>
                    <td class="has-text-align-left" data-align="left">Snaren</td>
                    <td class="has-text-align-left" data-align="left">20</td>
                    <td class="has-text-align-left" data-align="left">15</td>
                    <td class="has-text-align-left" data-align="left">Per set</td>
                </tr>
            </tbody>
        </table>
    </figure>
</div>

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:

<div style="overflow-x: auto; -webkit-overflow-scrolling: touch;">
</div>

Dit werkt echter anders in WordPress. Hier heb je maken met een Gutenberg-blockcode.

Een HTML tabel responsive maken bij een Gutenberg-blockcode

<!-- wp:table {"hasFixedLayout":true,"className":".wp-block-table { overflow-x: auto; -webkit-overflow-scrolling: touch; display: block; }","canvasClassName":"cnvs-block-core-table-1767278538637","borderStyle":"double","borderWidthTop":1,"borderWidthBottom":1,"borderWidthLeft":1,"borderWidthRight":1,"borderRadiusTopLeft":1,"borderRadiusTopRight":1,"borderRadiusBottomLeft":1,"borderRadiusBottomRight":1} -->
<figure class="wp-block-table .wp-block-table { overflow-x: auto; -webkit-overflow-scrolling: touch; display: block; } cnvs-block-core-table-1767278538637"><table><thead><tr><th class="has-text-align-left" data-align="left">Product</th><th class="has-text-align-left" data-align="left">Prijs per stuk</th><th class="has-text-align-left" data-align="left">Prijs per eenheid</th><th class="has-text-align-left" data-align="left">Voorraad</th><th class="has-text-align-left" data-align="left">Eenheid</th></tr></thead><tbody><tr><td class="has-text-align-left" data-align="left">Plectrum</td><td class="has-text-align-left" data-align="left">10</td><td class="has-text-align-left" data-align="left">1</td><td class="has-text-align-left" data-align="left">10</td><td class="has-text-align-left" data-align="left">Per 100</td></tr><tr><td class="has-text-align-left" data-align="left">Snaren</td><td class="has-text-align-left" data-align="left">20</td><td class="has-text-align-left" data-align="left">1</td><td class="has-text-align-left" data-align="left">15</td><td class="has-text-align-left" data-align="left">Per set</td></tr></tbody></table></figure>
<!-- /wp:table -->

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:

.wp-block-table {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    display: block;
}

Als je dan via de Code editor van WordPress gaat kijken, dan ziet het er iets anders uit.

<!-- wp:table {"hasFixedLayout":false,"className":".wp-block-table { overflow-x: auto; -webkit-overflow-scrolling: touch; display: block; }","canvasClassName":"cnvs-block-core-table-1767278538637","borderStyle":"double","borderWidthTop":1,"borderWidthBottom":1,"borderWidthLeft":1,"borderWidthRight":1,"borderRadiusTopLeft":1,"borderRadiusTopRight":1,"borderRadiusBottomLeft":1,"borderRadiusBottomRight":1} -->
<figure class="wp-block-table .wp-block-table { overflow-x: auto; -webkit-overflow-scrolling: touch; display: block; } cnvs-block-core-table-1767278538637"><table><thead><tr><th class="has-text-align-left" data-align="left">Product</th><th class="has-text-align-left" data-align="left">Prijs per stuk</th><th class="has-text-align-left" data-align="left">Prijs per eenheid</th><th class="has-text-align-left" data-align="left">Voorraad</th><th class="has-text-align-left" data-align="left">Eenheid</th></tr></thead><tbody><tr><td class="has-text-align-left" data-align="left">Plectrum</td><td class="has-text-align-left" data-align="left">10</td><td class="has-text-align-left" data-align="left">1</td><td class="has-text-align-left" data-align="left">10</td><td class="has-text-align-left" data-align="left">Per 100</td></tr><tr><td class="has-text-align-left" data-align="left">Snaren</td><td class="has-text-align-left" data-align="left">20</td><td class="has-text-align-left" data-align="left">1</td><td class="has-text-align-left" data-align="left">15</td><td class="has-text-align-left" data-align="left">Per set</td></tr></tbody></table></figure>
<!-- /wp:table -->

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.