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