I Aspro: Deretter, fra og med versjon 1.1.7, kan du tilpasse tabeller for mobilversjon. Det må gjøres endringer i kilde sider - legg til en klasse som er ansvarlig for tilpasningsevnen til tabeller.

En enkel tabell i mobilversjonen går utover siden.

For å gjøre tabellen responsiv, gå til å redigere siden der tabellen ble lagt til. Gå deretter til redigeringsmodus for kildekode.

Før åpningsmerket

legg til en tag med klassen.

Etter den avsluttende taggen

skriv inn taggen.

...

Lagre endringene dine.

Nå ruller bordet og går ikke utenfor rammen.

Ved horisontal rulling går ikke tabellen utover rammen, men ved rulling til høyre i mobilversjonen åpnes en sidemeny. For å sikre at menyen ikke forstyrrer arbeidet med tabellen, må du gjøre endringer i sidekoden.

Vi må legge til "swipeignore"-klassen til taggen som vi la til tidligere. Som et resultat før taggen

en tag med klasser må spesifiseres.

...

Lagre endringene dine.

Nå, når du ruller tabellen til høyre, åpnes ikke sidemenyen, noe som forstyrret arbeidet med tabellen.

Du kan skjule sidemenyen når du blar til høyre og på andre sider. Du må legge til "swipeignore"-klassen til blokkeringskoden som du vil fjerne sidemenyvisningen for. Hvis taggen ikke har en klasse spesifisert, vil den ha formen . Hvis taggen allerede har klasser lagt til, skriv "swipeignore" atskilt med et mellomrom, for eksempel .

Hvis du bruker tabeller på siden, så må de også tilpasses mobile enheter. Jeg bruker to tilpasningsalternativer - komprimering og ordbryting + ordne tabeller i en kolonne.

Det første alternativet passer for alle tabeller med flere kolonner; Jeg bruker det andre alternativet på noen nettsteder i frontend. Det er en slik svakhet ved å vise menyer i form av en tabell, men når oppløsningen reduseres, komprimeres de så mye at de forårsaker indignasjon blant brukeren. Oversettelse med lav oppløsning i én kolonne - Bra valg, men igjen, du bør ikke bruke den for alle bord.

Grunnleggende alternativ

Så for de fleste tabellene på nettstedet bruker jeg følgende css-kode:

@medieskjerm og (max-width:1000px)(td(word-break:break-all;)

Den spesifiserer at ord som ikke passer inn i blokken skal begynne med en oppløsning på mindre enn 1000 px ny linje. Oppløsning 1000 er et eksempel, se på nettstedene dine, for noen er det fornuftig å sette oppløsningen lavere.

Oppnå god skjerm tabell er mulig ved å bruke dobbel kode i CSS. Jeg bruker parallelt:

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

Den sier at med en oppløsning på mindre enn 700 px vises tabellen i 100 % størrelse, det vil si at den er komprimert, men opptar hele blokken i bredden. Egenskapen!important indikerer at den vil gjelde for alle oppløsninger mindre enn 700px.

Tilpasning i én kolonne

Det er vanskeligere å tilpasse tabellen slik at den vises i én kolonne med lav oppløsning. Passer ikke til alle bord, men ofte nødvendig. Først spesifiser den opprinnelige klassen for tabellen, for eksempel,