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 рублей.