Adaptive Tables

What to do with tables on adaptive websites? Here are some solutions.

Convert each row to a small table

If the parameters are listed in the first column, it is suitable for comparing parameters. Example 1.1 code by Stas Melnikov.

If the parameters are listed in the header, it is suitable for sequential reading of the table. Example 1.2 code.

Gradually transform rows to subtables with complex layout of each resulting subtable. Example 1.3 code.

Add horizontal scroll

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

Pin the first column and enable horizontal scrolling for the rest. Example 2.2 code — follow the link to see the solution for the case when there is a lot of content in the first column.

If the parameters are listed in the header, convert them to the first column and pin it. Example 2.3 code.

Table with sorting. Example 2.4 code.

Show only the most important columns

And hide the rest. Example 3.1 code.

Let user choose which columns to see. By default hide unimportant ones. Example 3.2 code.

Show content after a tap

Show that there is a table, and open the content after a tap. Example 4 code.

Use smaller letters

Reduce table and text sizes proportionally. Example 5 code.

Mary, find my magnifying glass, please.

Make a Frankenstein’s monster

Scroll through the columns by swiping and pressing buttons. Show on the minimap which columns are currently on screen. Example 6 code.

The minimap
Let user choose a viewing mode
Let user choose a sorting type

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

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

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