Поиск
Искать в:
Все решения  
  • Все решения
  • Интернет-магазины
    • Аспро: Лайтшоп
    • Аспро: Максимум
    • Аспро: Шины и диски 2.0
    • Аспро: Next
    • Аспро: Оптимус
    • Аспро: Шины и диски, интернет-магазин
    • Аспро: Интернет-магазин
    • Аспро: Крутой шоп
    • Аспро: Маркет
  • Корпоративные сайты
    • Аспро: Корпоративный сайт 3.0
    • Аспро: Корпоративный сайт 2.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 element.php Google Fonts google maps lazyload marketmixer SEO sku template.php title автокомпозит авторизация адаптивная верстка активация 1С-Битрикс акции баннеры бета-версия блог бренды быстрый заказ валюта видео вкладки водяной знак главная страница добавить поле заголовки изменение текста в блоке изменить заголовки изображения Интернет-магазин каптча капча карта карточка товара карточка услуги кастом каталог товаров кеш классы стилей код решения кодировка количество товара конвертация валюты контакты корзина левое меню личный кабинет логотип магазины маска телефона мегаменю медиабиблиотека меню местоположения много многосайтовость модули модуль настроек название сайта наличие товара настройка валют настройка веб-форм настройка инфоблоков настройка компонентов настройка свойств настройки доступа настройки инфоблока настройки магазина настройки модулей настройки раздела нет в наличии новости номера обновление платформы обновление решения Обновление решения обратный звонок ограничения основной баннер отзывы отзывы о товаре отображение свойств отображение товаров отсутствующие товары оформление заказа переиндексация переустановка решения персональные рекомендации платежные системы подписка на товар поиск покупка в 1 клик пользовательские свойства пользовательские скрипты поля похожие товары почта почтовые уведомления почтовые шаблоны привязать товары проекты разделы каталога разработчикам региональность регистрация резервное копирование рейтинг свойства заказа свойства инфоблока свойства товара связанные товары символьный код скидки скидки на товар скорость загрузки сайта скриншоты скрыть товары в поиске сортировка социальные сервисы список пользователей способы доставки сравнение товаров ссылка структура сайта текст в корзине текст в летающей корзине тизеры типы цен товары в регионах товары на складах торговые предложения умный фильтр услуги установка решения файлы и папки фильтр на главной фильтр по годам формы формы на инфоблоках формы обратной связи форум хлебные крошки цен цены чпу элементы