Loading...
Нещодавно, а якщо бути точним – 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;
}
}
А який спосіб використовуєте ви?
