Responsive tables in WordPress websites

One of our clients wanted a couple of tables to appear on their pricing page to deliver a clear comparison between their offering and that of their typical competitors.

Responsive tables in WordPress – Should we use a table plugin or HTML / CSS?

We tried various plugins (such as Tablepress and WP Pricing Tables), but had a few problems with them – they weren’t completely responsive (meaning that they didn’t display well on mobile devices) and the row/column formatting went a bit weird on several browsers, especially when a column had more lines of text than other columns in the same row.

As there was no other need for tables on the site we decided to implement a combination of CSS and simple HTML to deliver the desired effect.

Another advantage of using your own code, rather than relying on a ready-made plugin, is that you can vary the text and appearance depending on the size of the browser window. For example, the full-size desktop table (see below) has 3 clear column headings and text in the footer columns that relate to those individual columns (e.g. ‘Nasty Surprises’ belong to the ‘Typical competitor’ column and not to my client).

When reduced down on a mobile device the significance of that could get lost on the visitor, so we need to find a way of making the layout more relevant.

We coded our responsive HTML and CSS solution to remove the column heading ‘Typical Competitor’ and ‘The Verbatim Way’ and add them to the front of the column text on each individual field. We did something similar for the footer text so that instead of having separate columns saying ‘No Hidden Extras’ and ‘Nasty Surprises’ we had a single text string saying ‘No hidden extras and no nasty surprises’.

Here’s how that same table looks for mobile users…

The Coding

Our client can easily add more rows to his table. So, if you have a client who is willing and able to do a little more manual effort to maintain his pages, a hand-crafted HTML and CSS solution might be the most appropriate way to go.

Here are a couple of screenshots to help you get started if you wanted to do something similar yourselves. First a section of the HTML we added to the page…

…and, here is a segment of the CSS. As you can see the key point is the smart use of ‘display:none;’ for each media block to decide which bit of HTML gets displayed depending on the screen width…

So there it is. All done with a simple combination of HTML and CSS. If you don’t feel confident enough to do this work yourself, please do get in touch and ask us to quote for doing it for you.