Таблицы. Отображение таблиц на смартфоне

По умолчанию таблица в мобильном виде выводится в виде карточек, на которой слева показаны названия столбцов, а справа - значения колонок: 

Если вы хотите убрать названия колонок и сделать так, чтобы значения показывались на всю ширину, то используем класс crd2MobCards в сниппете as-table

Пример: 

<div class="as-table crd2MobCards" data-code="jb-tasks"></div>

Обновление Июнь 2024. В мобильном виде таблица может быть показана как панельки со скроллингом вправо (crd2MobCardsHorizontal). 

Демостенд как это работает - https://demo.web-automation.ru/list/watch/smotr-tablicy-v-mobilnom-s-gorizontalnym-skrollingom---1150

Пример разметки: 

<div class="as-table as-panel crd2MobCards crd2MobCardsHorizontal" data-slideout-ignore="1" data-code="table1"></div>

Атрибут data-slideout-ignore нужен для того, чтобы не вызывать на смартфоне вызов меню по swipe движению. 

Классы crd2MobCards,crd2MobCardsHorizontal можно комбинировать. 

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

Примечание. Можно глобально установить такие карточки для всех таблиц. В as.systemOptions.js добавить настройку  table.mobCardsHorizontal:

{ 
"table.mobCardsHorizontal": true
}
Falcon Space - функциональная веб-платформа разработки на узком стеке MS SQL/Bootstrap. Вводная по Falcon Space
Насколько полезной была статья?

Google поиск по нашей документации

Выгода от использования Falcon Space

В 2-3 раза экономнее и быстрее, чем заказная разработка
Более гибкая, чем коробочные решения и облачные сервисы
Используйте готовые решения и изменяйте под свои потребности
Нужна бесплатная консультация?
Планируете делать веб-проект?
Сайт использует Cookie. Правила конфиденциальности OK