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

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

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

Решение

В Аспро: 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 maps sku template.php title авторизация адаптивная верстка активация 1С-Битрикс бета-версия большая галерея валюта видео вкладки выводить услуги без разделов главная страница добавить поле добавить поле в форму единицы измерения заголовки заголовки на главной изменение заглавие блока изменение текста в блоке изменить заголовки изменить заголовки на главной изменить порядок вывода изменить порядок картинок изображения капча карточка проекта карточка товара каталог товаров классы стилей кодировка купить в 1 клик левое меню маска телефона медиабиблиотека меню мобильная платформа модули модуль настроек название сайта наличие товара настройка веб-форм настройка инфоблоков настройка компонентов настройка свойств настройка списка настройка услуг настройки доступа настройки магазина настройки модулей облако 1с-битрикс обновление платформы обновление решения описание для анонса отзывы о товаре отображение свойств ошибка активации переиндексация подлинность лицензии поиск покупка в 1 клик пользовательские скрипты поля порядок отображения картинок почтовые уведомления права доступа премодерация привязать товары примечание в корзине проекты разработчикам резервное копирование свойства инфоблока свойства товара связанные товары связи скорость загрузки сайта сортировка социальные сервисы список пользователей сравнение товаров статистика страница партнеров структура сайта тайтл текст в карточке товара текст в корзине текст в летающей корзине тизеры типовые проекты типы цен торговые предложения умный фильтр услуги установка решения фильтр на главной формы обратной связи формы редактирования форум хлебные крошки чпу Шины и Диски