Adaptive Tables
What to do with tables on adaptive websites? Here are solutions.
Convert Each Row to a Small Table
If parameters are placed in a first column, it is suitable for comparing parameters. Example 1.1 code by Stas Melnikov.
If parameters are placed in a header, it is suitable for a sequential reading of a table’s content. Example 1.2 code.
Gradually transform rows to blocks with a complicated layout for each resulting block. Example 1.3 code.
Add Horizontal Scrolling
Just enable a horizontal scrolling on small screens. Example 2.1 code.
Pin a first column and enable a horizontal scrolling for a rest of a columns. Example 2.2 code. Also take a look on the table with a very long first cell content.
If parameters are placed in a header, move them to a first column and pin it. Example 2.3 code.
Table with sorting. Example 2.4 code.
Show Only a Most Important Columns
And hide a rest of them. Example 3.1 code.
Let user choose which columns to see. By default, hide an unimportant (as you think) columns. Example 3.2 code.
Show Table’s Content After a Tap
Place a symbol of a table on a page and show a table’s content after a tap on this symbol. Example 4 code.
Use Smaller Letters
Proportionally reduce a size of a table and it’s content. Example 5 code.
Mary, find my magnifying glass, please.
Make a Frankenstein’s Monster
Scroll a columns with a swipe gesture and a control buttons. Use a minimap to show which columns are currently visible:
Let user choose a viewing mode:
And a sorting:
Example 6 code.
