Поиск
Искать в:
Все решения  
  • Все решения
  • Интернет-магазины
    • Аспро: Премьер
    • Аспро: Лайтшоп
    • Аспро: Максимум
    • Аспро: Шины и диски 2.0
    • Аспро: Next
    • Аспро: Оптимус
    • Аспро: Шины и диски, интернет-магазин
    • Аспро: Маркет
    • Аспро: Интернет-магазин
    • Аспро: Крутой шоп
  • Корпоративные сайты
    • Аспро: Приорити 2.0
    • Аспро: Корпоративный сайт 3.0
    • Аспро: Корпоративный сайт 2.0
    • Аспро: Стройка 2.0
    • Аспро: Инжиниринг
    • Аспро: Металл
    • Аспро: Digital 2.0
    • Аспро: Детский сад и образовательный центр
    • Аспро: Курорт 2.0
    • Аспро: Ландшафт 2.0
    • Аспро: Автосервис
    • Аспро: Медицинский центр 3.0
    • Аспро: Ландшафт
    • Аспро: Медицинский центр 2.0
    • Аспро: Курорт
    • Аспро: Стройка
    • Аспро: Сайт медицинского центра
    • Аспро: Корпорация
    • Аспро: Корпоративный сайт
    • Аспро: Корпоративный сайт современной компании
    • Аспро: Приорити
    • Аспро: Digital
  • Модули
    • Аспро: Привязка ответственного
    • Аспро: Шинный калькулятор
    • Аспро: Кредитный калькулятор
    • Аспро: Универсальный импорт
  • 1С-Битрикс
    • Общее

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

ID статьи: 367 , создана 14 июн 2018 , последнее исправление  13 май 2019
Необходимо адаптировать таблицы для мобильной версии

Решение

В Аспро: Next, начиная с версии 1.1.7, вы можете адаптировать таблицы для мобильной версии. Необходимо внести изменения в исходный код страницы — добавить класс, который отвечает за адаптивность таблиц.

Простая таблица в мобильной версии выходит за рамки страницы.


Чтобы таблица была адаптивной, перейдите в редактирование страницы, где добавлена таблица. Затем перейдите в режим редактирования исходного кода.


Перед открывающимся тегом <table> добавьте тег с классом <div class="tables-responsive">.

После закрывающегося тега </table> пропишите тег </div>.


<div class="tables-responsive">

<table>...</table>

</div>

Сохраните изменения.

Теперь таблица прокручивается и не заходит за рамки.


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


Необходимо добавить класс «swipeignore» в тег <div class="tables-responsive">, который мы добавили ранее. В результате перед тегом <table> должен быть прописан тег с классами <div class="tables-responsive swipeignore">.

<div class="tables-responsive swipeignore">

<table>...</table>

</div>

Сохраните изменения.

Теперь при прокрутке таблицы вправо не открывается боковое меню, которое мешало работе с таблицей.


Вы можете убрать вывод бокового меню при прокрутке вправо и на других страницах. Необходимо добавить класс «swipeignore» в тег <div> блока, для которого нужно убрать вывод бокового меню. Если у тега не был прописан класс, он примет вид <div class="swipeignore">. Если у тега <div> уже добавлены классы, то пропишите «swipeignore» через пробел, например <div class="class swipeignore">.


  • Комментарии
Загрузка комментариев...
Для пользователей

Тэги

1С-Битрикс cdn custom.css Google Fonts google maps init.php js-скрипт SEO sitemap sku template.php title автокомпозит авторизация адаптивная верстка адаптивность таблиц активация 1С-Битрикс акции артикул товара Аспро: Медицинский центр 2.0 баннеры Битрикс24 бренды быстрый заказ валюта видео визуальный редактор вкладки главная страница единицы измерения заголовки задать стили знаки вопроса изменить порядок картинок изображения Интернет-магазин капча карта карта сайта карточка проекта карточка товара каталог товаров каталог услуг кеш классы стилей кодировка количество товара контакты корзина купить в 1 клик левое меню личный кабинет логотип магазины маска телефона медиабиблиотека меню местоположение местоположения модули модуль настроек название сайта настройка валют настройка веб-форм настройка инфоблоков настройка компонентов настройка свойств настройка услуг настройки доступа настройки инфоблока настройки магазина настройки модулей настройки раздела не добавляется товар в корзину нет в наличии новости область поиска обновление платформы обновление решения обратный звонок ограничения описание для анонса основной баннер отзывы отзывы о товаре отображение свойств отображение товаров оформление заказа ошибка 404 персональные рекомендации платежные системы поиск покупка без наличия покупка в 1 клик пользовательские свойства популярные категории похожие товары почтовые уведомления почтовые шаблоны привязать товары проекты проживание разделы каталога разработчикам региональные счетчики регистрация резервное копирование свойства заказа свойства инфоблока свойства товара связанные товары символьный код скидки скидки на товар скорость загрузки сайта скрывать изображение модели сортировка социальные сервисы список заказов список пользователей способы доставки сравнение товаров ссылка статьи структура сайта тайтл текст блока «Характеристики» тизеры типы цен товары на складах товары поиск торговые предложения Триггерные рассылки умный фильтр услуги установка решения уязвимости файлы и папки форма задать вопрос формы формы на инфоблоках формы обратной связи форум футер хлебные крошки цены чпу шаблоны на инфоблоках элементы в разделе