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

Advantages

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

Disadvantages

  • 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

Advantages

  • No loss of information
  • Smart solution

Disadvantages

  • 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

Advantages

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

Disadvantages

  • 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

Advantages

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

Disadvantages

  • 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

Advantages

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

Disadvantages

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

Conclusion

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: , , ,

Leave a Reply