Responsive tables in WordPress websites

Are you having trouble getting your responsive tables in WordPress to work properly? We recently implemented a custom CSS / HTML solution for a client that avoids using plugins and is easy to manage.

20 Jan, 2014

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 columns (e.g. ‘Nasty Surprises’ belongs 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 headings ‘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 want to do something similar yourself. First, a section of the HTML we added to the page…

Screenshot showing html required for responsive table in WordPress

…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

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.

 

3 Comments

  1. William

    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.

    Reply
  2. Wordpress Learner

    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.

    Reply
    • Martin Jarvis

      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.

      Reply

Submit a Comment

Your email address will not be published. Required fields are marked *

You may also like…

How do canonical links work in wordpress?

How do canonical links work in wordpress?

Canonical links are used to indicate the preferred URL of a webpage that has multiple versions or duplicates of the same content. This article explains canonical links in depth.

Share This
Martin Jarvis

Martin Jarvis

I typically reply within an hour

We're here Monday - Friday during UK working hours. Drop us an email and we'll get back to you.

Martin Jarvis
Hi. It's Martin here. How can I help you?
Start Chat with:
chat