Оптимизация таблиц для просмотра на мобильных устройствах
Совсем недавно, а если быть точным – 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, Ваше решение отлично подошло!
Вау отлично? спасибо уважаемый? что старался для нас! Все быстро сделал и получилось, спасибо огромное.