How to create responsive tables in WordPress

Looking for a way to transform any table in WordPress to a responsive and mobile-friendly data table? It can be done literally in seconds. Here you’ll find a quick tutorial how to create a mobile-friendly table in WordPress using Gutenberg editor.

How to create a table in WordPress

Creating a table in WordPress, especially with Gutenbeg editor, is a simple task. You just add a table using + in the top left side of editor, enter Table to seach box, and select a table element.

how to create table in wordpress using gutenberg editorTable block will show up. Enter a number of columns and rows (don’t count the header row), and hit Create Table button.

wordpress create tableIf you want your table to be user friendly (aka. mobile friendly), don’t forget to add headings to it. Headings can be added to tables in WordPress by enabling Header section in the table block settings section (on the right).

wordpress table add headingsHere’s how default table will look like in WordPress.

wordpress tableAs you see, by default tables in WordPress are not responsive. They’re not bad, but you need to either scroll horizontally to view all the table content, or columns become extremely narrow depending how your WordPress theme styles table content. And both ways are not user-friendly. Now I’ll show you how to make any table in WordPress responsive.

How to make any table responsive in WordPress

If you want to create a responsive table in WordPress, or you want to convert any already existing table to responsive, you need install a Magic Liquidizer Responsive Table plugin. Go to Plugins >> Add New, and enter Magic Liquidizer into plugin search field. Once you find the plugin, hit Install Now. Plugin should be installed just in couple of seconds.

wordpress responsive table pluginAfter installing and activating the plugin you can check it’s settings (Magic Liquidizer Lite in the admin menu).

wordpress responsive table settingsBy default this plugin transforms any existing table in your WordPress website to responsive (Table selector is set to table). But this plugin also lets you transform only specific tables to responsive. For example, if you enter .friendly to a Table Selector settings field, only the table with a class friendly will be automatically transformed to responsive.

Here’s how you add a custom class to a table block: select table block, click Advanced tab, and add class name (in this example – friendly) to Additional CSS classes field.

add class to block in wordpress genesis editorOnce you save changes and refresh the page there the table is, you should see a perfectly responsive table that will look great on mobile devices.

wordpress responsive table in mobile

How to make sure that any table in WordPress website is responsive

If you have issues turning the existing tables in WordPress to responsive using Magic Liquidizer plugin, make sure your tables have correct syntax. Every table should have header, headings and body tags. For example:

<table>
    <thead>
        <tr>
            <th>Heading 1</th>
            <th>Heading 2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Element 1-1</td>
            <td>Element 1-2</td>
        </tr>
    </tbody>
</table>

If tables in your WordPress website are defined like that, they should transform to responsive using Magic Liquidizer plugin automatically.