Как оптимизировать таблицу для мобильной версии opencart

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

На одном из предыдущих уроков, мы рассматривали самый простой способ, как сделать таблицу адаптивной. Суть адаптации таблицы сводилась к появлению горизонтальной полосы прокрутки, на определенной ширине экрана.

Однако появление горизонтальной полосы прокрутки на маленьких экранах мобильных устройств, приведет пользователя в бешенство. Неужели никак нельзя избежать полосы прокрутки? Можно! И я сейчас покажу вам, как это сделать.

HTML разметка

Для управления таблицей, мы обернули её в блок с классом container.

<div >
<table>
<thead>
<tr>
<th>Название услуги</th>
<th>Сайт</th>
<th>Сроки</th>
<th>Количество страниц</th>
<th>Стоимость</th>
</tr>
</thead>
<tbody>
<tr>
<td data-label=»Название услуги»>Адаптация таблиц</td>
<td data-label=»Сайт»>Лендинг</td>
<td data-label=»Сроки»>5 дней</td>
<td data-label=»Количество страниц»>1</td>
<td data-label=»Стоимость»>1 000 руб</td>
</tr>
<tr>
<td data-label=»Название услуги»>Адаптация таблиц</td>
<td data-label=»Сайт»>Корпоративный сайт</td>
<td data-label=»Сроки»>6 дней</td>
<td data-label=»Количество страниц»>5</td>
<td data-label=»Стоимость»>2 000 руб</td>
</tr>
<tr>
<td data-label=»Название услуги»>Адаптация таблиц</td>
<td data-label=»Сайт»>Интернет-магазин</td>
<td data-label=»Сроки»>7 дней</td>
<td data-label=»Количество страниц»>15</td>
<td data-label=»Стоимость»>5 000 руб</td>
</tr>
</tbody>
</table>
</div>

Атрибут data-label

Во всех ячейках таблицы добавлен атрибут data-label и в качестве передаваемого параметра — значения из шапки таблицы. В дальнейшем в каждую ячейку будут добавляться эти значения.

CSS правила

.container <
min-width: 320px;
max-width: 100%;
padding: 0 15px;
box-sizing: border-box;
>

table <
border-collapse: collapse;
width: 100%;
margin: 20px 0;
>

table td, table th <
padding: 10px;
border: 1px solid #cbbdbd;
>

tr:nth-child(even) <
background-color: #f0f4c3
>

Адаптируем таблицу

При уменьшении размеров экрана, содержимое таблицы становится трудно различимым. В адаптивном режиме браузера, определяем контрольную точку, когда пора уже перестроить ячейки (флекс-элементы), в столбик (поменять направление главной оси).

@media (max-width: 720px) <
// переопределяем CSS правила
>

Скроем названия в шапке таблицы.

.container table thead <
display: none;
>

Преобразуем строчные ряды таблицы в блочные элементы. Теперь таблица имеет совсем другой вид – ячейки встали в столбик.

.container table tr <
display: block;
>

Назначим ячейку флекс-контейнером, а данные ячеек раскидаем по правому и левому краю вдоль главной оси.

.container table td <
display: flex;
justify-content: space-between;
font-size: 14px;
>

При помощи псевдоэлемента before и функции attr(), подставим в каждую ячейку значение data-label.

.container table td::before <
content: attr(data-label);
font-weight: bold;
margin-right: 20px;
>

Для просмотра, как работает адаптация таблицы, перейдите на 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, код стал доминировать над контентом.

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.

Адаптация таблиц под мобильные устройства

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

Проблема

Проблема у дизайнера начинается в тот момент, когда таблица из десктопной версии интерфейса адаптируется под мобильные устройства. Как мы знаем — таблицы могут иметь много столбцов, что влечёт за собой вылеты таблицы за ширину экрана на мобильном устройстве.

Данная проблема встречается повсеместно, и усугубить ее может пожалуй лишь контент ячейки, который не переносится построчно, увеличивая тем самым ширину колонки.

Подопытный набор данных

Для того чтобы понимать лучше суть проблемы, мы придумаем себе таблицу, и будем ее адаптировать.

Результатом станет довольно обширная таблица, которая имеет все нужные нам виды колонок. Признаться даже список сверху вызывает у меня вопросы — справа тратится слишком много места.

С фиксированной шириной и переносом строк

С шириной по контенту

Анонс следующей статьи “О списках в интерфейсах и как их применять по феншую”.

Десктоп

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

Варианты адаптации

Проблема — наша таблица по ширине не влезает в телефон.

Делать растровую картинку с таблицей и вставлять ее в макет

Возможные верные решения по убыванию

Каждую строку таблицы делать блоком

Первый вариант адаптации — сделать каждую строку таблицу отдельным блоком, и вывести ее на экране телефона.

Проблема с данным методом: Удлиняется вертикальный скроллинг, данные повторяются. (частично решается добавлением фильтров для поиска)

Возьмём за пример таблицу, которая отображена сверху. В таком виде она не поместится по ширине в мобильный экран. Для решения этой проблемы мы будем каждую строку таблицы преобразовывать в блок.

Таким образом мы добьемся максимальной читаемости таблицы, без потери данных. Мы видим в строке все столбцы, при необходимости можем сделать функцию поиска, а так же добавить сортировки для блоков. Проблемой при данном подходе является длинный скроллинг.

Второй вариант — горизонтальный скроллинг таблицы

Для реализации данного подхода — нам нужно взять таблицу из десктопной версии сайта, и поместить ее в мобильный экран, а весь тот контент, который не помещается по ширине вынести за границы экрана, добавив при этом горизонтальную прокрутку к скрытым столбцам.

Субъективно для меня — это наименее подходящий вариант отображения таблиц в мобильных устройствах — так, как он скрывает большую часть контента за пределами окна устройства — что нарушает визуальную целостность данных контекста каждой строки таблицы (мы не видим строку целиком).

Вывод

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

Если вы заметили ошибки, или вам есть что дополнить — дайте мне знать, я обязательно это сделаю. Спасибо за внимание!

Как таблицу оптимизировать для мобильной версии

Создайте аккаунт или войдите в него для комментирования

Вы должны быть пользователем, чтобы оставить комментарий

Создать аккаунт

Зарегистрируйтесь для получения аккаунта. Это просто!

Войти

Уже зарегистрированы? Войдите здесь.

Похожие публикации

pagespeed Мобильная версия OpenCart, ускорение магазина

Автор: Sha, 12 марта 2018

• без гмо
• 100/100
• (и ещё 16)

• без гмо
• 100/100
• layout
• layout type
• mobile
• route
• mobile route
• adaptive
• usabiliti
• *pro*
• оптимизация
• скорость
• тормозит
• попугаи
• mobiledetect
• mobile version
• first mobile
• mobile header

• 0 комментариев
• 22 395 просмотров

• Sha
• 12 марта 2018

sale Layout Type, ускорение мобильной версии. oc3

Автор: Sha, 19 мая 2020

• без гмо
• 5$ price
• (и ещё 7)

• без гмо
• 5$ price
• mobile first
• mobile
• mobile route
• mobile site
• mobile version
• speedtest
• 100/100

• 0 комментариев
• 4 638 просмотров

• Sha
• 20 мая 2020

Дубль блока "Поиск по сайту" на мобильной версии.

Автор: MrPisch, 20 января 2022

Модуль импорта из XLS в нестандартные таблицы

Автор: andreyegorov1987, 15 часов назад

Не работает quick view в мобильной версии

Автор: foggy, 19 ноября 2022

Сейчас на странице 0 пользователей

• Нет пользователей, просматривающих эту страницу.

Покупателям

Разработчикам

Полезная информация

Последние дополнения

Движок интернет магазина OpenCart (ocStore) — официальный сайт OpenCartForum.com Powered by Invision Community

• Уже зарегистрированы? Войти
• Регистрация

Раздел покупок

ocStore

Шаблоны

OpenCart.Pro

• Создать.

Важная информация

На нашем сайте используются файлы cookie и происходит обработка некоторых персональных данных пользователей, чтобы улучшить пользовательский интерфейс. Чтобы узнать для чего и какие персональные данные мы обрабатываем перейдите по ссылке. Если Вы нажмете «Я даю согласие», это означает, что Вы понимаете и принимаете все условия, указанные в этом Уведомлении о Конфиденциальности.

Как отображать таблицы на маленьких экранах

Лучший способ отображения большого количества данных это, несомненно таблица. Удобней всего их просматривать на экранах десктопа, а вот с мобильными устройствами возникает ряд сложностей. Таблица данных растягивается горизонтально и не помещается в экранную ширину мобильного телефона.

Что делать с таблицами на маленьких экранах? Многие дизайнеры бились над этой проблемой, но идеальное решение, обеспечивающее оптимальный пользовательский опыт найти пока не удалось. Чтобы разобраться в этом вопросе, необходимо понять назначение таблиц и их информационную структуру.

Таблицы полезны, поскольку позволяют пользователям сравнивать различные значения данных. Рассмотрим классическое построение таблицы, где основные данные, на которые смотрят пользователи, — это первый столбец с ключевыми параметрами. Остальные столбцы — это ячейки с атрибутами, дополняющие параметры первого столбца.

Это означает, что первая колонка с ключевым параметрами должна всегда оставаться закрепленной, чтобы быть в полое зрения пользователя. Таким образом у пользователя всегда будет исходное значение при просмотре других атрибутов. Однако столбцы со значениями атрибутов не обязательно должны быть всегда видны.

Поскольку невозможно вместить все содержимое таблицы на экране, мы можем горизонтально прокручивать столбцы атрибутов, чтобы дать пользователю возможность сравнить все значения. Для смены значений столбцов можно использовать кнопки карусели (вперед/назад).

При нажатии на кнопки, будет меняться заголовок второго столбца. Каждый переход позволяет увидеть новое значение атрибута. Если проскролить таблицу вниз, то заголовки столбцов должны оставаться видимыми, чтобы была видна взаимосвязь.

Таблицы нужны не только для сравнения значений ключевых параметров, но и для детального анализа значений нескольких атрибутов. Поскольку невозможно отобразить все столбцы таблицы одновременно, в мобильной версии можно отображать некоторые данные в модальном листе.

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

Если пользователям необходимо отредактировать конкретное значение, они могут нажать на значок редактирования в правом верхнем углу. Это включит режим редактирования, в котором все значения данных превратятся в текстовые поля. После завершения редактирования пользователь подтверждает изменения иконкой галочки и возвращается в режим чтения.

Не все элементы управления должны находиться в полях таблицы. Есть и другие действия, которые при необходимости можно разместить за пределами таблицы.

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

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

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

Разобравшись в назначении таблиц и их информационной структурой, вы сможете создать оптимальный вариант для мобильных экранов. Пользователи используют таблицы для сравнения и анализа данных. Поэтому в мобильной адаптации необходимо фиксировать столбец с ключевыми параметрами на месте, чтобы пользователь мог комфортно сравнивать данные. А для детального анализа, можно выводить данные строк в модальных листах.

Отображение таблиц на десктопах несомненно имеет преимущества перед мобильным вариантом, но этого и следовало ожидать. Ведь когда вы ограничены в пространстве, необходимо максимально использовать экран. А отобразить всю информацию на одном экране зачастую невозможно, поэтому всегда старайтесь выводить наиболее полезную и важную информацию.