Как сделать адаптивную таблицу. Поворачивать телефон — это крайняя мера

Не секрет для любого верстальщика, что таблицы — зло. Их сложно адаптировать, кастомизировать. Если на десктопной версии сайта еще довольно легко расписать таблицу, то когда начинается адаптивная верстка — все идет в тартарары.

Собственно, одним из действенных вариантов — создание горизонтальной прокрутки у таблицы. Делается несложно, но сегодняшний пост не об этом. Однако, покажу для Вас.

Первый способ адаптации

Стилизуем все это дело (главным образом нам нужно стилизовать table-wrap ).

Table-wrap { text-align: center; display: inline-block; background-color: #fff; padding: 2rem 2rem; color: #000; } @media screen and (max-width: 600px) { .table-wrap { overflow-y: scroll; } }

В результате, на ширине ДО 600 пикселей таблица будет скроллиться, а сайт нет. Удобно, но сегодня я хотел бы поговорить о другом.
Я нашел еще один интересный подход к адаптивности таблицы. Он заключается в использовании data-атрибутов и псевдоклассов. Сейчас все покажу.

Второй способ адаптации

Для начала поменяем разметку:

Раздали каждому столбцу атрибут data-label , который нам пригодится в будущем.

Задаем базовые стили:

body { text-align: center; padding-top: 10%; font-family: sans-serif; background-image: url("bg.jpg"); background-size: cover; height: 100vh; color: #fff; } .table-wrap { text-align: center; display: inline-block; background-color: #fff; padding: 2rem 2rem; color: #000; } table { border: 1px solid #ccc; width: 100%; margin:0; padding:0; border-collapse: collapse; border-spacing: 0; } table tr { border: 1px solid #ddd; padding: 5px; } table th, table td { padding: 10px; text-align: center; border-right: 1px solid #ddd; } table th { color: #fff; background-color: #444; text-transform: uppercase; font-size: 14px; letter-spacing: 1px; }

Выглядит, как обычная таблица, естественно, сдвигая сайт на 320-420 пикселях, мы увидим горизонтальный скролл всего сайта. Не дело.

Как это исправить? добавляем стили:

@media screen and (max-width: 600px) { table { border: 0; } table thead { display: none; } table tr { margin-bottom: 10px; display: block; border-bottom: 2px solid #ddd; } table td { display: block; text-align: right; font-size: 13px; border-bottom: 1px dotted #ccc; border-right: 1px solid transparent; } table td:last-child { border-bottom: 0; } table td:before { content: attr(data-label); float: left; text-transform: uppercase; font-weight: bold; } }

Здесь мы сделали строки таблицы блочными, удалили названия столбцов, а текст самих столбцов выровняли по правому краю. В свою очередь при помощи псевдокласса :before мы присоединяем к левому краю наши дата-атрибуты. Выходит так:

Вот еще пен:

Как видно, мы превратили строки таблицы в небольшой блок, в котором заключена вся информация. Думаю, такой вариант адаптивности таблицы подойдет для небольших таблиц. Пользуйтесь, друзья!

Если вы используете на сайте таблицы, то их также надо адаптировать под мобильные устройства. Я использую два варианта адаптации – сжатие и перенос слов + выстраивание таблиц в один столбик.

Первый вариант подходит для всех многоколоночных таблиц, второй вариант я на некоторых сайтах использую на морде. Есть такая слабость выводить меню в виде table, но при уменьшении разрешения они сжимаются настолько, что вызывают негодование у пользователя. Перевод при маленьком разрешении в одну колонку – хорошее решение, но, повторюсь, использовать его для всех table не стоит.

Основной вариант

Итак, для большинства таблиц на сайте я использую код в css:

@media screen and (max-width:1000px){td{word-break:break-all;}

Он указывает, что слова, которые не помещаются в блок, должны при разрешении менее 1000 px начинаться с новой строки. Разрешение 1000 – это пример, смотрите по своим сайтам, для кого-то есть смысл ставить разрешение меньше.

Добиться хорошего отображения table можно с помощью двойного кода в CSS. Я использую параллельно:

@media screen and (max-width:700px){img{max-width:96% !important;height:auto !important;} iframe, textarea, input, button, submit, video, object, embed{max-width:99% !important;} table, span, div, ins{max-width:100% !important;}

В нём указано, что при разрешении менее 700 px таблица отображается в 100%-ом варианте по размеру, то есть, сжимается, но занимает весь блок по ширине. Свойство!important показывает, что оно будет применяться для всех разрешений менее 700 px.

Адаптация в один столбик

Сложнее адаптировать таблицу так, чтобы она при небольшом разрешении отображалась в один столбик. Подходит не для всех table, но часто необходимо. Для начала укажите для таблицы оригинальный класс, например,

Затем в стилях прописывается код:

@media only screen and (max-width: 320px),(min-device-width: 320px) and (max-device-width: 600px) /* Force table to not be like tables anymore */ table.mceItemTable, table.mceItemTable thead, table.mceItemTable tbody, table.mceItemTable th, table.mceItemTable td, table.mceItemTable tr {display: block ; }

В данном случае display: block; указывает, что в таблицах mceItemTable блокируется tbody, th, td, tr. Как результат, при разрешении менее 600 px таблицы строится в одну колонку и table, по сути, не является.

Использование таблиц – это ещё один пирожок в корзину удобства пользователя, но они должны корректно отображаться и на мобильных устройствах, иначе результат будет противоположным ожидаемому – посетители станут убегать от кривых Table и ухудшат ПФ. Никто не запрещает выводить таблицы в одну колонку для всех Table, и наоборот, но лучше микст в зависимости от особенностей табличной конструкции.

В Аспро: Next, начиная с версии 1.1.7, вы можете адаптировать таблицы для мобильной версии. Необходимо внести изменения в исходный код страницы - добавить класс, который отвечает за адаптивность таблиц.

Простая таблица в мобильной версии выходит за рамки страницы.

Чтобы таблица была адаптивной, перейдите в редактирование страницы, где добавлена таблица. Затем перейдите в режим редактирования исходного кода.

Перед открывающимся тегом