In Aspro: Next, starting from version 1.1.7, you can adapt tables for mobile version. Changes need to be made to source pages - add a class that is responsible for the adaptability of tables.

A simple table in the mobile version goes beyond the page.

To make the table responsive, go to edit the page where the table was added. Then go to source code editing mode.

Before the opening tag

add a tag with the class .

After the closing tag

enter the tag.

...

Save your changes.

Now the table scrolls and does not go beyond the frame.

When scrolling horizontally, the table does not go beyond the frame, but when scrolling to the right in the mobile version, a side menu opens. To ensure that the menu does not interfere with working with the table, you need to make changes to the page code.

We need to add the "swipeignore" class to the tag that we added earlier. As a result, before the tag

a tag with classes must be specified.

...

Save your changes.

Now, when scrolling the table to the right, the side menu does not open, which interfered with working with the table.

You can hide the side menu when scrolling right and on other pages. You need to add the “swipeignore” class to the block tag for which you want to remove the side menu display. If the tag did not have a class specified, it will take the form . If the tag already has classes added, then write “swipeignore” separated by a space, for example .

If you use tables on the site, then they also need to be adapted to mobile devices. I use two adaptation options - compression and word wrapping + arranging tables in one column.

The first option is suitable for all multi-column tables; I use the second option on some sites in the frontend. There is such a weakness in displaying menus in the form of a table, but when the resolution is reduced, they are compressed so much that they cause indignation among the user. Translation at low resolution in one column - good decision, but, again, you shouldn’t use it for all tables.

Basic option

So, for most of the tables on the site I use the following css code:

@media screen and (max-width:1000px)(td(word-break:break-all;)

It specifies that words that do not fit into the block should begin with a resolution of less than 1000 px new line. Resolution 1000 is an example, look at your sites, for some it makes sense to set the resolution lower.

Achieve good display table is possible using double code in CSS. I use in parallel:

@media screen and (max-width:700px)(img(max-width:96% !important;height:auto !important;) iframe, textarea, input, button, submit, video, object, embed(max-width: 99% !important;) table, span, div, ins(max-width:100% !important;)

It states that with a resolution of less than 700 px, the table is displayed in 100% size, that is, it is compressed, but occupies the entire block in width. The!important property indicates that it will apply to all resolutions smaller than 700px.

Adaptation in one column

It is more difficult to adapt the table so that it is displayed in one column at a low resolution. Not suitable for all tables, but often necessary. First, specify the original class for the table, for example,