Making HTML table responsive

Making an HTML table responsive so that it displays properly on a mobile device is part of standard web design. The question, of course, is how do you make such a table responsive within, for example, Elementor Builder or a WordPress theme?

How do you make an HTML table responsive in WordPress?

A practical guide for modern websites

Responsive tables remain a challenge within WordPress, especially when working with fixed columns or older content that doesn’t automatically scale on mobile screens. Fortunately, with a few smart HTML adjustments, you can make your table perfectly readable on any device — without plugins.

Making a table responsive in WordPress with HTML

Tables are ideal for displaying structured information, but on mobile screens they quickly overflow. In this blog, I’ll show how a small HTML adjustment can make any table responsive — even in the WordPress Block Editor. In the case of the WordPress Block Editor, I’ll show how this can be styled with CSS.

Why isn’t an HTML table automatically responsive?

Standard HTML tables have a fixed width. When the content is wider than the screen, the table pushes the layout sideways. WordPress doesn’t add automatic scroll or stacking, which means mobile users have to scroll horizontally or even miss content.

Fortunately, this is easy to fix.

Solution: place your table in a scrollable container

By “wrapping” your table in a <div> with overflow-x: auto, the user can scroll horizontally when needed. This is the safest and most compatible method.

In HTML, it looks like this:

<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>

You can paste this HTML code into a text file and rename the text file from .txt to .htm. Open this htm file in the browser and shrink the screen so that the toolbar below the table becomes visible. Optionally, open the browser’s development tools via CTRL+SHIFT+I and simulate the device emulation mode via CTRL+SHIFT+M. If you want to remove the scrollbar, delete the following lines:

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

However, this works differently in WordPress. Here you’re dealing with a Gutenberg block code.

Making a HTML table responsive within a 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 -->

To make such a Gutenberg block code responsive, you can use CSS. Some theme developers may have already added this in the CSS. If not, you can use CSS yourself. It’s recommended to use a Child theme for this. If you’re using a child theme, you can upload a custom.css via an FTP program like FileZilla (path /…/wp-content/themes/squaretype-child). In the case of Squaretype Child, it’s the style.css. . This overrides the style.css in the main theme. Add the following to the CSS of the Child theme:

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

When you then take a look through the WordPress Code Editor, it appears slightly different.

<!-- 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 -->

The result is as follows. By using CTRL+SHIFT+I + CTRL+SHIFT+M and moving the slider, the scroll bar becomes visible on a mobile device. That is exactly how it should behave.

The result looks like this:

If you want to learn more about CSS and stylesheets, click here. If you have questions about this blog post, contact me via the contact form.