Не секрет для любого верстальщика, что таблицы — зло. Их сложно адаптировать, кастомизировать. Если на десктопной версии сайта еще довольно легко расписать таблицу, то когда начинается адаптивная верстка — все идет в тартарары.
Собственно, одним из действенных вариантов — создание горизонтальной прокрутки у таблицы. Делается несложно, но сегодняшний пост не об этом. Однако, покажу для Вас.
Первый способ адаптации| Услуга Описание Цена Скидка Мобильная верстка Верстка под телефоны $3000 50% Посадка на CMS WordPress $3000 30% |
| Мобильная верстка | Верстка под телефоны | $3000 | 50% |
| Посадка на CMS WordPress | Создание сайта с админ. панелью | $3000 | 30% |
Стилизуем все это дело (главным образом нам нужно стилизовать table-wrap ).
| 1 2 3 4 5 6 7 8 9 10 11 12 13 | .table-wrap { text-align : center ; display : inline-block; background-color : #fff ; padding : 2rem 2rem; color : #000 ; } .table-wrap { overflow-y: scroll ; } } |
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-атрибутов и псевдоклассов. Сейчас все покажу.
Для начала поменяем разметку:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
|
| Мобильная верстка | Верстка под телефоны | $3000 | 50% |
| Посадка на CMS WordPress | Создание сайта с админ. панелью | $3000 | 30% |
Раздали каждому столбцу атрибут data-label , который нам пригодится в будущем.
Задаем базовые стили:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 | 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 ; } |
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 пикселях, мы увидим горизонтальный скролл всего сайта. Не дело.
Как это исправить? добавляем стили:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | @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 ; } } |
@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
мы присоединяем к левому краю наши дата-атрибуты. Выходит так:
Вот еще пен:
Как видно, мы превратили строки таблицы в небольшой блок, в котором заключена вся информация. Думаю, такой вариант адаптивности таблицы подойдет для небольших таблиц. Пользуйтесь, друзья!
На этот мы раз затронем схожую тему, но возьмем таблицу посложнее, с заголовками.
Для структуризации данных (например, стоимость услуг или часы работы) и удобном представлении пользователю идеально подходят таблицы, которые в современное время должны быть адаптивными для смартфонов и планшетов, иначе важные элементы, хранящиеся в ячейках, могут быть скрыты за пределами экрана.
Нарисуем таблицу графика работы службы доставки со сменными курьерами и ценами, добавив атрибут aria-label (текстовую метку) к ячейкам с данными.
| 8:00-12:00 | Николай | Нет | 20 руб. |
| 12:00-18:00 | Вадим | Да | 50 руб. |
| 18:00-23:00 | Алексей | Да | 120 руб. |
| 1:00-6:00 | Евгений | Нет | 90 руб. |
Table.delivery {width: 100%; border: 0px; border-collapse: collapse;} table.delivery thead {font-weight: bold;} table.delivery td {padding: 0.6rem 1rem; border-bottom: 1px solid #e8e9eb;}
Внешний вид таблицы на ПК с фиксированным разрешением 1140 пикс. будет выглядеть примерно так.
При уменьшении разрешения дисплея до 334 пикс. ячейки сожмутся на сколько это возможно и оставят часть информации скрытой.
С помощью CSS мы сможем добиться нужно эффекта - разделение таблицы на понятные посетителю блоки при разрешении экрана меньше 800 пикс. Просто добавим к уже созданным стилям следующий код:
@media screen and (max-width: 800px) { table.delivery thead { display: none; } table.delivery tr { display: block; margin-bottom: 1rem; border-bottom: 2px solid #e8e9eb; } table.delivery td { display: block; text-align: right; } table.delivery td:before { content: attr(aria-label); float: left; font-weight: bold; } }
На скриншоте ниже вы можете наглядно оценить превосходство данного метода.
Спасибо за внимание! Не забывайте ставить оценку в рейтинге статьи!
Если вы используете на сайте таблицы, то их также надо адаптировать под мобильные устройства. Я использую два варианта адаптации – сжатие и перенос слов + выстраивание таблиц в один столбик.
Первый вариант подходит для всех многоколоночных таблиц, второй вариант я на некоторых сайтах использую на морде. Есть такая слабость выводить меню в виде 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, но часто необходимо. Для начала укажите для таблицы оригинальный класс, например,
