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.
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.
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.
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: HTML, Responsive development, Usability, Web development