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

31 августа 2018, 11:55

Необходимо адаптировать таблицы для мобильной версии

Решение

В Аспро: 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">.

По материалам aspro.ru

Поделиться