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. Есть версия на русском.
Технологии цифрового маркетинга — книга, где я был соавтором (параграф про создание сайта) и литературным редактором (привёл текст к единой стилистике и упростил формулировки). От 249 рублей.