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.

Example 1.1

If parameters are placed in a header, it is suitable for a sequential reading of a table’s content. Example 1.2 code.

Example 1.2

Gradually transform rows to blocks with a complicated layout for each resulting block. Example 1.3 code.

Example 1.3

Add Horizontal Scrolling

Just enable a horizontal scrolling on small screens. Example 2.1 code.

Example 2.1

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.

Example 2.2

If parameters are placed in a header, move them to a first column and pin it. Example 2.3 code.

Example 2.3

Table with sorting. Example 2.4 code.

Example 2.4

Show Only a Most Important Columns

And hide a rest of them. Example 3.1 code.

Example 3.1

Let user choose which columns to see. By default, hide an unimportant (as you think) columns. Example 3.2 code.

Example 3.2

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.

Example 4

Use Smaller Letters

Proportionally reduce a size of a table and it’s content. Example 5 code.

Example 5
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:

Example 6

Let user choose a viewing mode:

Example 6

And a sorting:

Example 6

Example 6 code.