Оптимизация таблиц для просмотра на мобильных устройствах
Совсем недавно, а если быть точным – 2 февраля, подписчики блога Яндекса, получили письмо “Как быть мобильным”. В данном письме указано только два условия, по которым Яндекс считает страницы пригодными для мобильных устройств:
- не должно быть горизонтальной прокрутки;
- не должно быть элементов, которые не работают в популярных мобильных платформах.
И как же я был удивлен, обнаружив горизонтальную прокрутку на адаптивной версии сайта. Причиной появления прокрутки были таблицы, которые не помещались в экран мобильных устройств. Начал сёрфить инет в поиске решений. Потестил несколько из найденных решений. Каждый из методов имел как свои достоинства, так и недостатки. Оптимальным, как по мне, является решение, при котором ячейки таблиц просто смещаются друг под друга. Выглядит это следующим образом:
Стоит отметить, что каждая ячейка, которая является первой в строке имеет уникальный фон, что позволяет пользователям лучше вникать в содержимое таблиц.
Для реализации такого вида адаптивности таблиц необходимо добавить следующий код в таблицу стилей:
1 2 3 4 5 6 7 8 9 10 11 12 13 | @media screen and (max-width: 600px) { table {width:100%;} thead {display: none;} tr:nth-of-type(2n) {background-color: inherit;} tr td:first-child {background: #f0f0f0; font-weight:bold;font-size:1.3em;} tr th:first-child {font-weight:bold;font-size:1.3em;} tbody td, tbody th {display: block; text-align:center;} tbody td, tbody th:before { content: attr(data-th); display: block; text-align:center; } } |
А какой способ используете вы?
Комментарии:
Спасибо. Как раз искал решение для таблиц.
Подскажите, куда конкретно добавлять эти значения?
Данные необходимо добавлять в таблицу стилей css. Вам ли не знать)
Большое спасибо, делаю качественные сайты на UCOZ, Ваше решение отлично подошло!
Вау отлично? спасибо уважаемый? что старался для нас! Все быстро сделал и получилось, спасибо огромное.
Олег, огромное спасибо! Очень долго не могла решить свою проблему по адаптации таблиц под мобильные устройства на сайтах wordpress, пыталась устанавливать плагины, даже тему вордпресс менять, но увы… ничего не помогало. У меня интернет магазин, а товары никак не хотели вставать по 1 в колонке – по 3 шт. в ряд и все тут! Теперь все красиво и за какие-то 3 минуты! Спасибо за помощь.