Не секрет для любого верстальщика, что таблицы — зло. Их сложно адаптировать, кастомизировать. Если на десктопной версии сайта еще довольно легко расписать таблицу, то когда начинается адаптивная верстка — все идет в тартарары.
Собственно, одним из действенных вариантов — создание горизонтальной прокрутки у таблицы. Делается несложно, но сегодняшний пост не об этом. Однако, покажу для Вас.
Первый способ адаптацииУслуга Описание Цена Скидка Мобильная верстка Верстка под телефоны $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
мы присоединяем к левому краю наши дата-атрибуты. Выходит так:
Вот еще пен:
Как видно, мы превратили строки таблицы в небольшой блок, в котором заключена вся информация. Думаю, такой вариант адаптивности таблицы подойдет для небольших таблиц. Пользуйтесь, друзья!
Если бы таблицы могли хорошо адаптироваться под разные разрешения экранов, то человечество и по сей день делало бы табличную верстку. Я ещё застал то время и знаю, о чем говорю.
Однако мы живем в другое время, табличная верстка канула в лету, но потребность в использовании классических таблиц на сайтах все равно осталась. Поэтому мы не будем отрицать существование таблиц, а лучше узнаем о самом простом способе, как сделать таблицу адаптивной .
Демонстрация адаптивной таблицы . HTML разметкаЮлия | Смирнова | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 |
Эвелин | Яковлева | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 |
Андрей | Петров | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 |
Мы создали простенькую HTML таблицу, пока она помещается на экране, все OK. При уменьшении ширины экрана, таблица будет срезаться и мы не увидим её данных или она станет очень мелкой и мы опять ничего не увидим.
Вы наверное заметили, что я поместил таблицу внутри тега div и очевидно не просто так. Сам по себе тег div ничего не даёт, пока мы не пропишем ему стили.
CSS стилиЗадав всего одно свойство, таблица адаптируется , автоматически появится горизонтальная полоса прокрутки, когда содержимое внутри тега div перестанет влезать в текущую ширину экрана по оси X .
Div (
overflow-x: auto;
)
Стилизуем остальные теги таблицы:
Table {
border-collapse: collapse; /* Отображать только одинарные линии */
border-spacing: 0; /* Расстояние между ячейками */
width: 100%;
border: 1px solid #afb42b;
color: #212121;
}
Th, td {
text-align: left;
padding: 8px;
}
Стилизация тега tr (ряд) заслуживает отдельного комментария. Уже стало нормой, когда табличные ряды имеют полосатый вид (зебра). Для этого используется псевдокласс :nth-child со значение в скобочках even . Значение even , всем четным элементам присваивает свойства, в нашем случае – это цвет фона. Таким образом, таблица будет полосатой.
Адаптивные сайты уже давно перестали быть диковинкой и они встречаются всё чаще и чаще. Учитывая последние новости с ранжированием поисковых систем (если кто не знает, в поиске с мобильного устройства приоритет отдается адаптивным сайтам), количество таких сайтов будет расти и дальше. Можно быть противником адаптации под мобильные устройства или же выступать «за», но факт остается фактом: всё чаще клиенты требуют, чтобы их сайт был адаптивным и веб-мастерам приходится это делать.
Одной из главных проблем при адаптации сайта под разные разрешения являются таблицы. Особенно, если в них очень много данных. Давайте рассмотрим два способа вёрстки адаптивной таблицы.
Для начала посмотрим как выглядит таблица:
OnePlus One | 100500 руб | 3 | 5.5 | 401 | 3100 |
OnePlus Two | 100500 руб | 4 | 5.5 | 401 | 3300 |
OnePlus X | 100500 руб | 3 | 5 | 441 | 2525 |
Скажем прямо: по-настоящему адаптивной такую таблицу не назовешь. Она хорошо смотрится на мобильном, ничего никуда не выпирает и вёрстка сайта не «течёт». Такой способ хорошо подходит, если на вашем сайте таблицы встречаются редко и нет смысла подключать какой-то плагин и писать дополнительные стили из-за них. Такой способ используется Bootstrap-ом. Итак, как это реализуется?
Всё просто: таблица обёрнута в div, которому задана максимальная ширина в 100% и overflow: auto.
Если таблица длинная, также можно задать максимальную высоту и зафиксировать шапку таблицы.
Результат, как и следующий пример, можно посмотреть на этой странице .
Вёрстка по-настощему адаптивной таблицыЕсли же у вас на сайте частенько встречаются таблицы, имеет смысл воспользоваться плагином Footable.
Для начала нужно подключить плагин (скачать на GitHub или подключить с CDN), а также инициализировать его:
$(function() { $(".table").footable({}); });
Здесь нужно кое-что прояснить: скрипт почему-то считает не ширину viewport-а, а ширину таблицы. Чтобы это исправить, нужно чуть «модернизировать» скрипт:
JQuery(function () { jQuery(".table").footable({ calculateWidthOverride: function() { return {width: jQuery(window).width()}; } }); })
В инициализации указываем класс таблицы или просто тег table, если хотим, чтобы все таблицы на сайте были адаптивными.
Что всё это значит? На планшетах будут скрываться колонки «RAM», «Диагональ», «PPI» и «Аккумулятор». При уменьшении до телефонов, к ним присоединится и колонка «Цена».
Контрольные точки можно указать в инициализации:
JQuery(function () { jQuery(".table").footable({ calculateWidthOverride: function() { return {width: jQuery(window).width()}; }, breakpoints: { mobile: 0, tablet: 720, desktop: 1024 } }); })
Это значит что в промежутке 0-720 действует правило для mobile, 720-1024 - tablet, а выше 1024 - desktop. Ничто не мешает создать вам ещё больше правил, если это требуется.
Также можно сделать, чтобы какая-то колонка была раскрыта по-умолчанию. Для этого указываем data-атрибут data-expanded=«true»
OnePlus One | 100500 руб | 3 | 5.5 | 401 | 3100 |
На этом возможности плагина не заканчиваются, но для создания адаптивных таблиц этого вполне достаточно. Остальные возможности рассмотрим в следующий раз.
Если вы используете на сайте таблицы, то их также надо адаптировать под мобильные устройства. Я использую два варианта адаптации – сжатие и перенос слов + выстраивание таблиц в один столбик.
Первый вариант подходит для всех многоколоночных таблиц, второй вариант я на некоторых сайтах использую на морде. Есть такая слабость выводить меню в виде 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, но часто необходимо. Для начала укажите для таблицы оригинальный класс, например,