Проблема у дизайнера начинается в тот момент, когда таблица из десктопной версии интерфейса адаптируется под мобильные устройства. Как мы знаем — таблицы могут иметь много столбцов, что влечёт за собой вылеты таблицы за ширину экрана на мобильном устройстве.
Данная проблема встречается повсеместно, и усугубить ее может пожалуй лишь контент ячейки, который не переносится построчно, увеличивая тем самым ширину колонки.
Подопытный набор данных
Для того чтобы понимать лучше суть проблемы, мы придумаем себе таблицу, и будем ее адаптировать.
Результатом станет довольно обширная таблица, которая имеет все нужные нам виды колонок. Признаться даже список сверху вызывает у меня вопросы — справа тратится слишком много места.
С фиксированной шириной и переносом строк
С шириной по контенту
Анонс следующей статьи “О списках в интерфейсах и как их применять по феншую”.
Десктоп
В окне браузера наша таблица будет довольно комфортно себя чувствовать. Мы можем контролировать отображение контента так, как нам нужно. Даже если таблица перестанет помещаться по ширине — то мы всегда можем либо скрыть пару колонок с самым низким приоритетом, либо в крайнем случае сделать скроллинг по горизонтали.
Варианты адаптации
Проблема — наша таблица по ширине не влезает в телефон.
Делать растровую картинку с таблицей и вставлять ее в макет
Возможные верные решения по убыванию
Каждую строку таблицы делать блоком
Проблема с данным методом: Удлиняется вертикальный скроллинг, данные повторяются. (частично решается добавлением фильтров для поиска)
Возьмём за пример таблицу, которая отображена сверху. В таком виде она не поместится по ширине в мобильный экран. Для решения этой проблемы мы будем каждую строку таблицы преобразовывать в блок.
Таким образом мы добьемся максимальной читаемости таблицы, без потери данных. Мы видим в строке все столбцы, при необходимости можем сделать функцию поиска, а так же добавить сортировки для блоков. Проблемой при данном подходе является длинный скроллинг.
Вывод
Теперь адаптация таблиц не должна нам казаться невыполнимой задачей, мы научились делать так, чтобы таблицы были удобоваримыми не только на десктопной версии сайтов, но и в мобильной (что применимо и к мобильным приложениям).
Привет! В этой статье расскажу, как можно адаптировать html-таблицу с помощью CSS
Введение
Не секрет для любого верстальщика, что таблицы — зло. Их сложно адаптировать, кастомизировать. Если на десктопной версии сайта еще довольно легко расписать таблицу, то когда начинается адаптивная верстка — все идет в тартарары.
Собственно, одним из действенных вариантов — создание горизонтальной прокрутки у таблицы. Делается несложно, но сегодняшний пост не об этом. Однако, покажу для Вас.
Первый способ адаптации
В результате, на ширине ДО 600 пикселей таблица будет скроллиться, а сайт нет. Удобно, но сегодня я хотел бы поговорить о другом. Я нашел еще один интересный подход к адаптивности таблицы. Он заключается в использовании data-атрибутов и псевдоклассов. Сейчас все покажу.
Второй способ адаптации
Для начала поменяем разметку:
Задаем базовые стили:
Выглядит, как обычная таблица, естественно, сдвигая сайт на 320-420 пикселях, мы увидим горизонтальный скролл всего сайта. Не дело. Как это исправить? добавляем стили:
Здесь мы сделали строки таблицы блочными, удалили названия столбцов, а текст самих столбцов выровняли по правому краю. В свою очередь при помощи псевдокласса ::before мы присоединяем к левому краю наши data-атрибуты. И все получилось. Пример посмотрите в пене:
Как видно, мы превратили строки таблицы в небольшой блок, в котором заключена вся информация. Думаю, такой вариант адаптивности таблицы подойдет для небольших таблиц. Пользуйтесь, друзья!
Надеюсь, Вам было интересно читать данную информацию. До скорых встреч)
Руководство для WordPress-разработчика по созданию адаптивных таблиц
В этой статье мы расскажем, как WordPress обрабатывает таблицы «из коробки» и почему такой подход неидеален. А также рассмотрим два метода создания адаптивных таблиц в WordPress.
Введение в таблицы WordPress
При создании таблицы редактор спрашивает, сколько столбцов и строк нужно в нее добавить.
После того, как таблица будет создана, ее можно заполнить любым удобным способом. А также отредактировать ее содержимое так же, как и в стандартном блоке абзаца.
При просмотре на сайте большинство таблиц будут выглядеть идеально.
Но только не на мобильных устройствах. Чем больше по объему таблицы, тем выше вероятность того, что их содержимое будет отображаться некорректно.
Для решения этой проблемы следует найти способы изменения CSS-стилей таблицы.
Как создать адаптивные таблицы в WordPress
В WordPress есть два способа решения этой проблемы:
1. Использование плагинов
А также опубликовать созданную таблицу, используя блок Ninja Tables в блочном редакторе Gutenberg.
2. Редактирование темы оформления
Одним из способов создания адаптивных таблиц вручную является использование горизонтальной прокрутки.
Для этого нужно добавить определенный CSS-класс к HTML-таблицам, которые необходимо сделать адаптивными. Например,
. Затем нужно добавить приведенный ниже код в файл style.css используемой темы оформления.
В качестве альтернативы можно использовать CSS для объединения столбцов:
Чтобы реализовать его, вам нужно сделать две вещи:
Сначала откройте редактор Gutenberg и выберите таблицу, с которой хотите работать. Затем кликните по трем точкам и выберите параметр « Редактировать как HTML» :
Затем нужно обернуть заголовки столбцов в теги
, а все остальное содержимое таблицы – в теги:
Это краткий пример реализации. Когда добавите необходимые теги, откройте файл CSS используемой темы оформления и добавьте в нее следующий код:
Данный код устанавливает контрольную точку на 600px и перестраивает таблицу при просмотре на экране меньшего размера.
Единственным недостатком этого подхода является необходимость ручного добавления тегов
иво все таблицы. Было бы проще включить объединенные столбцы с помощью плагина Ninja Tables.
Заключение
Существует два способа создания адаптивных таблиц в WordPress:
Пожалуйста, оставляйте свои мнения по текущей теме статьи. За комментарии, отклики, дизлайки, лайки, подписки огромное вам спасибо!
Дайте знать, что вы думаете по этой теме в комментариях. За комментарии, подписки, отклики, лайки, дизлайки огромное вам спасибо!
Оптимизация таблиц для просмотра на мобильных устройствах
Совсем недавно, а если быть точным — 2 февраля, подписчики блога Яндекса, получили письмо «Как быть мобильным». В данном письме указано только два условия, по которым Яндекс считает страницы пригодными для мобильных устройств:
И как же я был удивлен, обнаружив горизонтальную прокрутку на адаптивной версии сайта. Причиной появления прокрутки были таблицы, которые не помещались в экран мобильных устройств. Начал сёрфить инет в поиске решений. Потестил несколько из найденных решений. Каждый из методов имел как свои достоинства, так и недостатки. Оптимальным, как по мне, является решение, при котором ячейки таблиц просто смещаются друг под друга. Выглядит это следующим образом:
Стоит отметить, что каждая ячейка, которая является первой в строке имеет уникальный фон, что позволяет пользователям лучше вникать в содержимое таблиц.
Для реализации такого вида адаптивности таблиц необходимо добавить следующий код в таблицу стилей:
На одном из предыдущих уроков, мы рассматривали самый простой способ, как сделать таблицу адаптивной. Суть адаптации таблицы сводилась к появлению горизонтальной полосы прокрутки, на определенной ширине экрана.
Однако появление горизонтальной полосы прокрутки на маленьких экранах мобильных устройств, приведет пользователя в бешенство. Неужели никак нельзя избежать полосы прокрутки? Можно! И я сейчас покажу вам, как это сделать.
HTML разметка
Для управления таблицей, мы обернули её в блок с классом container.
При уменьшении размеров экрана, содержимое таблицы становится трудно различимым. В адаптивном режиме браузера, определяем контрольную точку, когда пора уже перестроить ячейки (флекс-элементы), в столбик (поменять направление главной оси).
@media (max-width: 720px) < // переопределяем CSS правила >
Скроем названия в шапке таблицы.
.container table thead < display: none; >
Преобразуем строчные ряды таблицы в блочные элементы. Теперь таблица имеет совсем другой вид – ячейки встали в столбик.
.container table tr < display: block; >
Назначим ячейку флекс-контейнером, а данные ячеек раскидаем по правому и левому краю вдоль главной оси.
Для просмотра, как работает адаптация таблицы, перейдите на CodePen и нажмите F12.
Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!
Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov. Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.
Если Вы не хотите пропустить новые материалы на сайте, то Вы можете подписаться на обновления: Подписаться на обновления
Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.
Порекомендуйте эту статью друзьям:
Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):
Комментарии ( 2 ):
Очень востребованая возможность при вёрстке сайтов. Спасибо Михаилу!
Отличный вариант. Спасибо. Немного изменил CSS, чтобы не добавлять data-label к каждой ячейке. table td:nth-child(1)::before < content: 'Название услуги'; >table td:nth-child(2)::before < content: 'Сайт'; >И так далее, а то на страницах с таблицами, где строк больше 400, код стал доминировать над контентом.
Для добавления комментариев надо войти в систему. Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.
