Поиск
Искать в:
Все решения  
  • Все решения
  • Интернет-магазины
    • Аспро: 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 favicon footer.php google maps Google Mobile Friendly Websites robot.txt SEO seo sku template.php title автокомпозит авторизация адаптивная верстка активация 1С-Битрикс активное и подключенное свойство акции артикул товара баннеры бренды быстрый заказ валюта вкладки главная страница добавить поле добавить поле в форму заголовки изменение заглавие блока изменение текста в блоке изображения капча карта карта сайта карточка проекта карточка товара каталог товаров каталог услуг кеш классы стилей ключевые слова кодировка количество товара композит композитный сайт контакты корзина левое меню личный кабинет логотип магазины маркер на карте маска телефона медиабиблиотека меню местоположения микроразметка мобильная платформа модули модуль настроек название сайта наличие товара настройка настройка валют настройка веб-форм настройка инфоблоков настройка компонентов настройка свойств настройка списка настройки доступа настройки инфоблока настройки магазина настройки модулей настройки раздела нет в наличии новая цена новости обновление платформы обновление решения обратный звонок ограничения округление скидок основной баннер отзывы отзывы о товаре отображение свойств отображение товаров отсутствующие товары на складах оформление заказа ошибка 404 ошибка активации персональные рекомендации платежные системы подбор проектов подлинность лицензии поиск покупка без наличия покупка в 1 клик пользовательские свойства похожие товары почтовые уведомления права доступа премодерация проекты разработчикам регистрация резервное копирование свойства заказа свойства инфоблока свойства раздела свойства товара связанные товары связи символьный код скидки скидки на товар скорость загрузки сайта скрыть товары в поиске сортировка социальные сервисы список пользователей способы доставки сравнение товаров статистика структура сайта тайтл текст блока «Характеристики» текст в заголовке браузера тизеры типовые проекты типы цен товары в регионах торговые предложения умный фильтр условия гарантии услуги установка решения файлы и папки фиксированная шапка на мобильном фильтр по годам формы обратной связи формы редактирования форум хлебные крошки цен чпу шапка на мобильном