Отображать ячейки таблицы как строки
С нашествием мобильников веб-мастерам приходится искать способы адаптации ранее созданных сущностей к просмотру на мобильных устройствах. Особенно это актуально на мобильных телефонах.
Одной из спорных сущностей стали HTML-таблицы. На экранах мониторов настольных компьютеров они стали привычным способом отображения различных данных. Но как бы прекрасно не выглядела страница с таблицей на мониторе, многие из них крайне неприглядно смотрятся на мобильных телефонах. А ведь телефон практически есть у каждого потенциального посетителя сайта.
Адаптации таблиц для удобного просмотра на телефоне можно использовать разный стиль отображения таблиц на устройствах с разной шириной. Для этого задействуем правило media из CSS.
К примеру, стало понятно что если ширина экрана меньше 800 пикселей, то ячейки таблицы нужно отобразить как строки.
@media screen and (max-width: 800px){
table td{display:block;
}
}
Code language: CSS (css)Данный способ заставит все ячейки всех таблиц отображаться строками при разрешении экрана менее 800 пикселей.