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

Disadvantages

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

Disadvantages

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

Disadvantages

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

Disadvantages

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

Disadvantages

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.