V Aspro: Next, od različice 1.1.7, lahko prilagodite tabele za mobilna različica. Treba je narediti spremembe vir strani - dodajte razred, ki je odgovoren za prilagodljivost tabel.

Preprosta tabela v mobilni različici presega stran.

Če želite narediti tabelo odzivno, pojdite na stran za urejanje, kjer je bila tabela dodana. Nato pojdite v način urejanja izvorne kode.

Pred začetno oznako

dodajte oznako z razredom.

Za zaključno oznako

vnesite oznako.

...

Shranite spremembe.

Zdaj se tabela pomika in ne presega okvira.

Pri vodoravnem drsenju tabela ne preseže okvirja, pri drsenju v desno pa se v mobilni različici odpre stranski meni. Da zagotovite, da meni ne moti dela s tabelo, morate spremeniti kodo strani.

Oznaki, ki smo jo dodali prej, moramo dodati razred "swipeignore". Kot rezultat, pred oznako

podati je treba oznako z razredi.

...

Shranite spremembe.

Zdaj, ko se pomikate po tabeli v desno, se stranski meni ne odpre, kar je motilo delo s tabelo.

Stranski meni lahko skrijete, ko se pomikate desno in na drugih straneh. Oznaki bloka, za katero želite odstraniti prikaz stranskega menija, morate dodati razred »swipeignore«. Če oznaka ni imela podanega razreda, bo imela obliko . Če ima oznaka že dodane razrede, napišite »swipeignore«, ločeno s presledkom, na primer .

Če na spletnem mestu uporabljate tabele, jih je treba tudi prilagoditi mobilne naprave. Uporabljam dve možnosti prilagajanja - stiskanje in prelom besed + urejanje tabel v enem stolpcu.

Prva možnost je primerna za vse tabele z več stolpci; drugo možnost uporabljam na nekaterih spletnih mestih v sprednjem delu. Takšna slabost je prikazovanje menijev v obliki tabele, ki pa se ob zmanjšanju ločljivosti tako stisnejo, da pri uporabniku povzročijo ogorčenje. Prevod v nizki ločljivosti v enem stolpcu - dobra odločitev, vendar ga spet ne smete uporabljati za vse tabele.

Osnovna možnost

Torej, za večino tabel na spletnem mestu uporabljam naslednjo kodo css:

@medijski zaslon in (max-width:1000px)(td(word-break:break-all;)

Določa, da se morajo besede, ki ne sodijo v blok, začeti z ločljivostjo, manjšo od 1000 slikovnih pik. nova vrstica. Resolucija 1000 je primer, poglejte svoje strani, nekaterim je smiselno nastaviti nižjo ločljivost.

Doseči dober zaslon tabela je mogoča z uporabo dvojne kode v CSS. Vzporedno uporabljam:

@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 % !pomembno;) table, span, div, ins(max-width:100% !important;)

Navaja, da je tabela z ločljivostjo, manjšo od 700 px, prikazana v 100-odstotni velikosti, torej je stisnjena, vendar zavzema celoten blok po širini. Lastnost!important nakazuje, da bo veljala za vse ločljivosti, manjše od 700 slikovnih pik.

Prilagoditev v enem stolpcu

Težje je tabelo prilagoditi tako, da bo prikazana v enem stolpcu v nizki ločljivosti. Ni primeren za vse mize, vendar je pogosto potreben. Najprej določite izvirni razred za tabelo, na primer