Five ways with responsive tables

Recently I was uninspired by Bootstrap’s cop-out for responsive tables where they just add horizontal scrollbars for widths under 768px.

I’d come across a few ideas in the past and now I’m exploring them to give pros and cons for each solution.

1. Dummy table image

Replace each instance of a table with a generic image and custom link text that goes to a new canonical table page.

Demo of dummy table image


  • Single implementation for all tables
  • No loss of information, i.e. hiding columns
  • Easier to view a full table in landscape mode


  • A large table is still hard to view on a mobile device
  • There is an additional click to see information

2. Reformat the table: cells become rows

In this case you have to make each cell a block level element so they stack on top of each other in a single column. Then to make sure we know what each piece of data is you can add content :before each cell as a label.

Demo and implementation of cells becoming rows


  • No loss of information
  • Smart solution


  • Each ‘row’ of the table becomes much taller – larger vertical scroll
  • You lose the ability to compare data

At uSwitch on the energy comparison table we used something similar – the generated content was used for the equals sign and only one cell became a row (the title of the plan).

3. Change the table’s orientation

In this solution, the table is flipped 90° anticlockwise so the header is always visible and fixed to the left-hand-side.

View demo of changed table orientation


  • No loss of information
  • Smart solution
  • Ability to compare rows/columns


  • Non-intuitive horizontal scrolling – iOS doesn’t show scrollbar so not easily discoverable
  • Table may have long headers so might not fit on screen
  • A challenge to implement
  • Would require a JS solution for bulletproof implementation

4. Use a chart or graph

Charts or graphs can often be a good way to visualise large amounts of data and there are some excellent JS libraries for achieving this.

View demo of table to chart


  • Charts/graphs can be a good overview of data
  • Easier to process a chart on mobile device


  • Loss of information
  • Not suitable for all tables
  • Specialised implementation for each table

5. Hide some of the data

This is probably the most simple solution, only show the most important columns in the table and perhaps have a link to the full version.

View a demo of hiding columns


  • No loss of information – after visiting full view
  • Easy to implement


  • Loss of information at basic view
  • Specialised implementation for each table
  • Some tables might not have superfluous data


The advantages and disadvantages will be particular to your business and depend on other factors such as do you use a CMS, what is the content of the tables, the size of the tables etc, so they are listed as guidelines for your decision making.

Tags: , , ,

One Response to “Five ways with responsive tables”

  1. Alex Nordeen says:


    I wanted to quickly catch up and see if you have received my email below.

    Eagerly awaiting your reply.

    ===============================Original message==============================


    Saw your post on .Javascript at , and noticed that you’ve shared

    Just thought that we published Javascript tutorial might be valuable to your readers and followers.
    Can you link to us?

    I did be happy to share your page with our 40k Facebook/Twitter/Linkedin Followers as a thank you.


Leave a Reply