Адаптив таблиц

Многие новички (и не только) не правильно делают адаптивный дизайн для страниц, которые содержат таблицы. Они их просто ужимают до размеров, когда становится вообще не понятно, что перед нами. Вот например, таблица из статьи новостного портала Беларуси, который, на минуточку, многие считают № 1−2:

Недавно заказчик по скайпу предложил интересное решение проблемы. Он сразу понимал, что все столбцы целиком на мобилках не поместятся, поэтому предупредил, что позже скажет какие колонки выпилить, а какие оставить, чтобы таблица хоть чем-то напоминала таблицу.

Это «костыль». Только в дизайне)

На самом деле, в адаптиве таблиц нет ничего сложного. Совсем. Нужно просто в определенный (когда контенту становится тесно) момент изменить вид таблицы с горизонтальной на вертикальную. Обычно это происходит на 480−640 пх, но бывают сайты в которых таблица очень широкая, и колонок много — в таких случаях, лучше изменить уже на 768. Рассмотрим на наглядном примере.

Задача: сделать адаптив таблицы шириной 1200 пх:

С уменьшением до 1000 пх нет ничего сложного:

А вот на 768 пх таблица уже не помещается полностью, и самое время ее немного видоизменить:

Как видим, все компактно и все на месте. Ни одна колонка не пропала, ничем не пожертвовали — весь контент используется как и раньше. Таблица по-прежнему горизонтальная, но с вертикальными списками в одной из колонок.

А вот на 480 от горизонтального варианта уже нужно отказываться в пользу вертикального. Меняем:

Таблица стала вертикальной: 1 строка состоит из двух «этажей». При этом все снова на месте и никуда не пропало.

Запилить 320 не составит труда:

Как видите — ничего сложного. Таким образом даже самую «страшную» таблицу можно запросто заадаптивить. Дерзайте!