Programmā Aspro: pēc tam, sākot no versijas 1.1.7, varat pielāgot tabulas mobilā versija. Ir jāveic izmaiņas avots lapas - pievienojiet klasi, kas ir atbildīga par tabulu pielāgošanas spēju.

Vienkārša tabula mobilajā versijā pārsniedz lapu.

Lai tabula būtu adaptīva, pārejiet uz lapas rediģēšanu, kurai tabula tika pievienota. Pēc tam pārejiet uz pirmkoda rediģēšanas režīmu.

Pirms sākuma taga

pievienot tagu ar klasi .

Pēc noslēguma atzīmes

ievadiet tagu.

...

Saglabājiet izmaiņas.

Tagad tabula ritinās un nepārsniedz rāmi.

Ritinot horizontāli, tabula netiek tālāk par rāmi, bet, ritinot pa labi mobilajā versijā, tiek atvērta sānu izvēlne. Lai izvēlne netraucētu darbam ar tabulu, ir jāveic izmaiņas lapas kodā.

Mums ir jāpievieno klase "swipeignore" iepriekš pievienotajam tagam. Rezultātā pirms atzīmes

jānorāda atzīme ar klasēm.

...

Saglabājiet izmaiņas.

Tagad, ritinot tabulu pa labi, sānu izvēlne neatveras, kas traucēja strādāt ar tabulu.

Sānu izvēlni var paslēpt, ritinot pa labi un citās lapās. Bloka tagam, kuram vēlaties noņemt sānu izvēlnes displeju, ir jāpievieno klase “swipeignore”. Ja tagam nebija norādīta klase, tam būs forma . Ja tagam jau ir pievienotas klases, ierakstiet “swipeignore”, atdalot to ar atstarpi, piemēram, .

Ja vietnē izmantojat tabulas, tās arī ir jāpielāgo mobilās ierīces. Es izmantoju divas adaptācijas iespējas - saspiešanu un vārdu aplaušanu + tabulu kārtošanu vienā kolonnā.

Pirmā opcija ir piemērota visām vairāku kolonnu tabulām; otro opciju izmantoju dažās priekšgala vietnēs. Tāds vājums ir izvēlņu attēlošanā tabulas veidā, taču, samazinot izšķirtspēju, tās tiek saspiestas tik ļoti, ka izraisa lietotāja sašutumu. Tulkojums ar zemu izšķirtspēju vienā kolonnā - labs lēmums, bet atkal nevajadzētu to izmantot visām tabulām.

Pamata variants

Tātad lielākajai daļai vietnes tabulu es izmantoju šādu css kodu:

@media screen and (maksimālais platums:1000px)(td(word-break:break-all;)

Tas nosaka, ka vārdiem, kas neietilpst blokā, jāsākas ar izšķirtspēju, kas mazāka par 1000 pikseļiem jauna līnija. Izšķirtspēja 1000 ir piemērs, apskatiet savas vietnes, dažiem ir jēga iestatīt zemāku izšķirtspēju.

Sasniegt labs displejs tabula ir iespējama, izmantojot dubulto kodu CSS. Paralēli lietoju:

@multivides ekrāns un (maksimālais platums: 700 pikseļi) (img(maksimālais platums: 96% !svarīgi; augstums: automātiski !svarīgi;) iframe, teksta apgabals, ievade, poga, iesniegšana, video, objekts, iegulšana (maksimālais platums: 99% !svarīgi;) tabula, span, div, ins(maksimālais platums:100% !svarīgi;)

Tajā teikts, ka ar izšķirtspēju, kas mazāka par 700 px, tabula tiek attēlota 100% izmērā, tas ir, tā ir saspiesta, bet platumā aizņem visu bloku. Rekvizīts!important norāda, ka tas attieksies uz visām izšķirtspējām, kas ir mazākas par 700 pikseļiem.

Adaptācija vienā kolonnā

Ir grūtāk pielāgot tabulu, lai tā tiktu parādīta vienā kolonnā ar zemu izšķirtspēju. Nav piemērots visiem galdiem, bet bieži nepieciešams. Vispirms norādiet tabulas sākotnējo klasi, piemēram,