How to Create Responsive Tables in WordPress That Don’t Suck

HTML tables, once commonly used for webpage layouts, are now a layout headache for many web designers. Tables often work best with fixed widths, which means they can wreak havoc on otherwise pixel-perfect responsive website designs. So what’s a WordPresser to do?

The first thing to do with tables is to use them sparingly. Tables should be used for tabular data and nothing else.

Not sure if a table is the right option for a specific data set? Put it to the spreadsheet test. Would this data make sense presented in a spreadsheet? If so, an HTML table is an appropriate choice. If not, consider using a list or some other element to present the data.

Once you’ve identified a table as the best option, what then? Make sure it renders beautifully regardless of the size of the device viewing the table. Easier said than done, right?

Fear not. In this tutorial, you’ll learn about five different tools you can use to make HTML tables beautifully responsive.

How Are Tables Handled by WordPress?

There isn’t a straightforward answer to that question. The way tables are presented in WordPress varies from one theme to the next because table styling is handled by the CSS that ships with each theme. So tables are rendered according to the CSS rules included with the active theme. Switch themes and the way tables are rendered will change.

Some themes have better built-in support for responsive tables than others. TwentySixteen, for instance, does a pretty good job of dealing with tables as long as they only have two or three columns filled with short bits of data. However, not all themes are as thoroughly designed as TwentySixteen.

Let’s have a look at how TwentySixteen handles an HTML table when rendered on a handheld device. Here is a bit of HTML that will produce a table with five columns and six rows. It shows the most popular content management systems according to W3Techs.

When dropped into a post with a TwentySixteen child theme activated, that table looks pretty good viewed on a laptop or desktop monitor. It’s clear right off-the-bat that TwentySixteen includes thoughtful table styling.

We can use Chrome Developer Tools Device Mode to see how things look on a smaller device.

screenshot of table with no plugins installed

Well that’s not ideal.

The TwentySixteen developers did include CSS styles that make tables responsive. If this table only included two or three columns it would probably look pretty good. However, this table includes five columns which is too much for the default table styling included with TwentySixteen.

Let’s fix this table up.

Make Tables Responsive Manually

The first option we’re going to look at is a manual fix that includes adding CSS and JavaScript to the theme. That might sound tricky, but using a strategy described in this tutorial from Exis, it’s actually pretty simple.

To make tables responsive, we need three things:

  • A properly formatted HTML table.
  • A short bit of JavaScript to associate each table heading cell with the data cells appearing in the same table column.
  • A simple CSS ruleset that will be triggered when the display shrinks below a predetermined width. This bit of CSS will rearrange the table rows into columns, hide the row of heading cells, and add the contents of the heading cells to each data cell.

It’s important to note that the table must be properly formatted for this to work. The script is designed to look for heading cells in a thead element and assign them as HTML attributes to the data cells in a tbody element. If you create a table doesn’t include thead and tbody elements the code won’t work.

Here’s the JavaScript we’ll be using:

And here’s the applicable CSS.

The simplest way to use this code is to add it right to the post or page where the table appears. You can do that by dropping the CSS between style tags, and dropping the JavaScript between script tags. If you do decide to do that, make sure you minify the JavaScript before dropping it into the text editor or the wpautop function will add paragraph breaks to the script, breaking it in the process.

screenshot of wordpress post editor with css and minified javascript added to end of post

The result is actually very nice. Here’s how the table looks when previewed with the iPhone5 preview in Google Chrome.

screenshot of table with manual css and javascript added

A Better Way to Do Tables

Adding the CSS and JavaScript directly into the post is not the best way to add the code.

If you only ever use this code once, adding it right to the post or page where the table appears is fine. However, if you’re going to use tables on a regular basis, a better way to add the code is to embed it right in the theme files.

Adding the code right to your theme really isn’t that hard. You can do it in just four steps.

  • First, make sure you’re using a child theme to avoid losing your work the next time you update your theme.
  • Second, copy and paste the CSS into the theme’s style.css file.
  • Third, save the JavaScript as a separate file and upload it to your theme directory.
  • Fourth, use the wp_enqueue_script function in your themes functions.php file to add the JavaScript resource to your theme, making sure to set in_footer to true while you’re doing that.

The trickiest part of the process is adding the script file with wp_enqueue_script, but I can make that step a little easier. Here’s a code snippet you can add to the functions.php file that will add the JavaScript file to the theme assuming you the JavaScript file responsive-tables.js and put it in the main theme directory.

Your functions.php file may look a little different, but this gives you an idea of what the enqueue function should look like. WPMU DEV writer and WordPress developer Daniel Pataki has covered the wp_enqueue_script function in depth on this blog. So you can refer to that tutorial–as I did–if you struggle with this step.

Once you’ve followed all four steps, the CSS and JavaScript will be available on every page of your site, and any tables on the site will be responsive.

Well done.

24/7 SUPPORT

Expert WordPress support when you need it

Our award-winning support team is filled with friendly folks who know their stuff and want to help you out. And since we live all over the world, there’s always someone available, whether it’s over live chat, email or in our forums.

TRY 24/7 SUPPORT FREE Find out more

Using a Plugin to Create a Table

Of course, maybe you don’t want to go to all of that trouble and would just prefer to use a plugin. There are certainly plenty of table plugins in the WordPress plugin directory, many of which claim to make tables responsive. I tested several different table plugins and found four that do a good job of rendering tables on devices of any size.

  • Data Tables Generator by Supsystic

    screenshot of data tables generator by supsystic plugin from wp.org

    This powerful table generating plugin provides a spreadsheet style input screen that can even perform simple mathematical calculations. There are many options available, including pagination of large data sets, the addition of a search box to filter table contents, sorting of table contents by column, and many styling options.

    The Responsive Mode setting offers four options: standard, automatic column hiding, horizontal scroll, and disabled. The standard mode produces a table similar to the manual method covered previously, although the result is not quite as nice. Horizontal scrolling keeps the full dimensions of the table but makes it scrollable so that all content can be viewed by scrolling through the table horizontally. Disabled keeps the full dimensions of the table and does not make it scrollable, cutting of a significant portion of the table as a result.

    I settled on automatic column hiding as the best option for this particular table. This option hid columns that could not be shown with the reduced dimensions and made them visible by clicking on an icon added to each table row.

    screenshot of table with data tables generator plugin

    Data Tables Generator by Supsystic is a powerful table plugin. It would be a very good option for website that use tables regularly and want to make those tables sortable, searchable, filterable, and add pagination so that large data sets are displayed across multiple pages. The responsive mode options are nice and do a reasonable job of making table contents more accessible on a mobile device. However, for simple tables, the manual method implemented earlier in this tutorial produces better results.

    If you do install this plugin keep in mind that it won’t affect any existing tables already added to your site. So if you’re looking for a plugin that will fix up tables retroactively, keep looking.

    Interested in Data Tables Generator by Supsystic?

  • Magic Liquidizer Responsive Table

    screenshot of magic liquidizer responsive table plugin from wp.org

    This plugin is designed to make standard HTML table elements responsive. All you have to do is install and activate the plugin and any tables embeded in posts and pages will be magically liquidized (made responsive).

    The settings page for the plugin does provide the option to specify the viewport width at which responsive settings take effect. So if tables are going to responsive mode too soon, or breaking the layout before switching to responsive mode, you can adjust the viewport width. In addition, if the plugin isn’t working by using table element as the selector, you can also set the plugin to select tables by #id or .class.

    What the plugin actually does is add display: none; to the table CSS at the set viewport width. It then uses JavaScript to rebuild the table as an HTML description list. Headings are added as terms and the table values are added as definitions. Here is the result.

    screenshot of table with magic liquidizer plugin

    You might have noticed that the table caption was not picked up and displayed by this plugin. If you do use this plugin you will want to avoid using caption since it will not be displayed when the table is viewed in responsive mode.

    Interested in Magic Liquidizer Responsive Table?

  • Automatic Responsive Tables

    screenshot of auto responsive tables plugin from wp.org

    This super-simple plugin does exactly what it says it will do: automatically make your tables responsive. Install it, activate it, configure a few basic settings, and all HTML tables embeded into posts and pages will be rendered responsively.

    After installing the plugin, visit Settings > Responsive Tables to set up the plugin. First, select the checkbox to make tables responsive, next set a breakpoint at which tables should switch to responsive mode, and then decide how you want the tables styled. Selecting the default styling options will produce a table that looks like this:

    screenshot of table with auto responsive tables plugin

    Pretty nice, right? How does it work?

    Like Magic Liquidizer, this plugin adds display: none; to the table and rebuilds the tables using JavaScript. However, rather than using a semantically-meaningful description list, this plugin builds the responsive table out of div elements. The end result looks really nice, but from a semantics point of view the markup is not ideal.

    In addition, it’s worth noting that this plugin doesn’t render the table caption in responsive mode. So you’ll need to find another way to add a table caption or title.

    Interested in Automatic Responsive Tables?

  • Responsive Scrolling Tables

    screenshot of responsive scrolling tables plugin from wp.org

    This plugin is designed to be used with fixed-width tables. If your theme behaves like TwentySixteen and automatically resizes tables as the viewport shrinks, then this plugin won’t do a thing. However, if your theme applies a fixed-width to tables, once that width exceeds the available space, the table will become horizontally scrollable.

    To test things out, I added some custom CSS fixing the width of the table at 700 pixels. Here’s what I got as a result.

    screenshot of table with responsive scrolling tables plugin

    What you can’t see in that screenshot is that the table now scrolls horizontally independent of the rest of the webpage. That way you can view the full contents of the table without breaking the responsive layout of the rest of the webpage.

    This plugin is a good option if you are dealing with very large data sets. In that case, it may be better to preserve the full-size formatting of the table and add horizontal scrolling rather than reformatting the layout to fit the available viewport real estate.

    Interested in Responsive Scrolling Tables?

Which is the Right Option for You?

Well, that depends.

How often do you use tables? What sort of data sets do you present in HTML tables? Do you want a plugin that does all the heavy lifting, or do you like to be hands-on with your website’s code? How you answer those questions will help determine which of these tools is the right one for your WordPress website.

Tables don’t have to look terrible on smartphones and tablets. With a little forethought and effort, you can use HTML tables on your WordPress website and have them look great on every device.

Do you use HTML tables? How do you make sure they look great on every device? Do you use a tool or plugin we didn't include on our list? VIEW 7 comments