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.

Also published on Medium. Есть версия на русском.

Опечатка? Выделите её и нажмите кнопки Control и Enter.

Технологии цифрового маркетинга — книга, где я был соавтором (параграф про создание сайта) и литературным редактором (привёл текст к единой стилистике и упростил формулировки). От 250 рублей.

Теперь электронную версию можно купить и читать на Литресе.