I Aspro: Därefter, från och med version 1.1.7, kan du anpassa tabeller för mobilversion. Ändringar måste göras källa sidor - lägg till en klass som ansvarar för tabellernas anpassningsförmåga.

En enkel tabell i mobilversionen går bortom sidan.

För att göra tabellen responsiv, gå till redigera sidan där tabellen lades till. Gå sedan till källkodsredigeringsläget.

Innan öppningsbrickan

lägg till en tagg med klassen.

Efter den avslutande taggen

ange taggen.

...

Spara dina ändringar.

Nu rullar bordet och går inte utanför ramen.

Vid horisontell scrollning går inte tabellen utanför ramen, men vid scrollning åt höger i mobilversionen öppnas en sidomeny. För att säkerställa att menyn inte stör arbetet med tabellen måste du göra ändringar i sidkoden.

Vi måste lägga till klassen "swipeignore" till taggen som vi lade till tidigare. Som ett resultat före taggen

en tagg med klasser måste anges.

...

Spara dina ändringar.

Nu, när du rullar tabellen åt höger, öppnas inte sidomenyn, vilket störde arbetet med tabellen.

Du kan dölja sidomenyn när du rullar åt höger och på andra sidor. Du måste lägga till klassen "swipeignore" till blocktaggen som du vill ta bort sidomenyn för. Om taggen inte hade en klass angiven kommer den att ha formen . Om taggen redan har lagt till klasser, skriv sedan "swipeignore" åtskilda av ett mellanslag, till exempel .

Om du använder tabeller på sajten så behöver de också anpassas till Mobil enheter. Jag använder två anpassningsalternativ - komprimering och radbrytning + ordna tabeller i en kolumn.

Det första alternativet är lämpligt för alla tabeller med flera kolumner; jag använder det andra alternativet på vissa webbplatser i frontend. Det finns en sådan svaghet i att visa menyer i form av en tabell, men när upplösningen minskas komprimeras de så mycket att de orsakar indignation hos användaren. Översättning med låg upplösning i en kolumn - bra beslut, men återigen, du bör inte använda det för alla bord.

Grundläggande alternativ

Så för de flesta av tabellerna på webbplatsen använder jag följande css-kod:

@mediaskärm och (max-width:1000px)(td(word-break:break-all;)

Den specificerar att ord som inte passar in i blocket ska börja med en upplösning på mindre än 1000 px ny linje. Upplösning 1000 är ett exempel, titta på dina webbplatser, för vissa är det vettigt att sätta upplösningen lägre.

Uppnå bra display tabell är möjlig med dubbelkod i CSS. Jag använder parallellt:

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

Det står att med en upplösning på mindre än 700 px visas tabellen i 100 % storlek, det vill säga den är komprimerad, men upptar hela blocket i bredd. Egenskapen!important indikerar att den kommer att gälla alla upplösningar mindre än 700px.

Anpassning i en kolumn

Det är svårare att anpassa tabellen så att den visas i en kolumn med låg upplösning. Inte lämplig för alla bord, men ofta nödvändigt. Ange först den ursprungliga klassen för tabellen, t.ex.