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.

Whilst plugins are often a good idea, as they offer a solution that can be managed by website owners and which are regularly updated by the plugin authors, they can sometimes ‘bloat’ a website with unnecessary code that impacts performance. They can also conflict with other plugins, and pose security risks if they are not updated or if they come from an unreliable source.

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 column (e.g. ‘Nasty Surprises’ belong to the ‘Typical competitor’ column and not to my client).

Screenshot of responsive table built with CSS and HTML

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…

Screenshot of responsive CSS and HTML table

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

Screenshot showing html required for responsive table in WordPress

…and , 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…

Screenshot showing css required for responsive table in WordPress

Take a look here at how our responsive table solution it works on the live website – try it on your desktop and on your mobile device to see the difference – 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.

 

Categories: Case Studies, Wordpress

3 Responses to “Responsive tables in WordPress websites”

  1. William says:

    Great article! I’ll give it a try, as I’m currently using Tabulizer for WordPress (www.tabulizer.com) which supports many responsive designs out of the box, but I want to get rid of the Javascript code.

  2. Hi,
    if you want to make your existing tables in wordpress responsive “Automatic Responsive tables” plugin will do the job. You just have to install and activate this plugin.

    • Thanks. I haven’t tried that plugin. It looks ok as a plug in and leave it solution, but I note it hasn’t been updated for a few years and so you’d need to keep an eye on it to make sure it works with your WordPress.

Leave a Reply

Share This

Please share if you've liked reading this

Share this post with your friends! It really helps us, and lets us know which content visitors like best - so we can write more like that!