Оптимизация таблиц для просмотра на мобильных устройствах

03.04.2016 Поисковая оптимизация 7 комментариев

(1 оценок, среднее: 5,00 из 5)

Загрузка...

Совсем недавно, а если быть точным — 2 февраля, подписчики блога Яндекса, получили письмо «Как быть мобильным». В данном письме указано только два условия, по которым Яндекс считает страницы пригодными для мобильных устройств:

не должно быть горизонтальной прокрутки;
не должно быть элементов, которые не работают в популярных мобильных платформах.

И как же я был удивлен, обнаружив горизонтальную прокрутку на адаптивной версии сайта. Причиной появления прокрутки были таблицы, которые не помещались в экран мобильных устройств. Начал сёрфить инет в поиске решений. Потестил несколько из найденных решений. Каждый из методов имел как свои достоинства, так и недостатки. Оптимальным, как по мне, является решение, при котором ячейки таблиц просто смещаются друг под друга. Выглядит это следующим образом:

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

Для реализации такого вида адаптивности таблиц необходимо добавить следующий код в таблицу стилей:

@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;
}
}

А какой способ используете вы?

Автор статьи: