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.

Posted by Emma Sax

June 16, 2014

Uncategorized