U Aspro: Next, počevši od verzije 1.1.7, možete prilagoditi tablice za mobilna verzija. Potrebno je unijeti promjene u izvor stranice - dodajte klasu koja je odgovorna za prilagodljivost tablica.

Jednostavna tablica u mobilnoj verziji nadilazi stranicu.

Kako biste tablicu prilagodili, idite na uređivanje stranice na koju je tablica dodana. Zatim prijeđite na način za uređivanje izvornog koda.

Prije uvodne oznake

dodajte oznaku s klasom.

Nakon završne oznake

unesite oznaku.

...

Spremite promjene.

Sada se tablica pomiče i ne izlazi izvan okvira.

Kod vodoravnog skrolanja tablica ne izlazi izvan okvira, ali kod skrolanja udesno u mobilnoj verziji otvara se bočni izbornik. Kako biste osigurali da izbornik ne ometa rad s tablicom, morate promijeniti kod stranice.

Moramo dodati klasu "swipeignore" oznaci koju smo dodali ranije. Kao rezultat toga, prije oznake

mora biti navedena oznaka s klasama.

...

Spremite promjene.

Sada, kada pomičete tablicu udesno, bočni izbornik se ne otvara, što je ometalo rad sa tablicom.

Možete sakriti bočni izbornik kada se pomičete udesno i na drugim stranicama. Morate dodati klasu "swipeignore" oznaci bloka za koju želite ukloniti prikaz bočnog izbornika. Ako oznaka nije imala navedenu klasu, poprimit će oblik . Ako oznaka već ima dodane klase, napišite "swipeignore" odvojeno razmakom, na primjer .

Ako koristite tablice na web mjestu, onda ih je također potrebno prilagoditi Mobilni uredaji. Koristim dvije mogućnosti prilagodbe - kompresiju i prelamanje riječi + slaganje tablica u jedan stupac.

Prva opcija je prikladna za sve tablice s više stupaca; ja koristim drugu opciju na nekim stranicama u sučelju. Postoji takva slabost u prikazu izbornika u obliku tablice, ali kada se rezolucija smanji, oni se toliko komprimiraju da izazivaju ogorčenje kod korisnika. Prijevod u niskoj rezoluciji u jednom stupcu - dobra odluka, ali, opet, ne biste ga trebali koristiti za sve tablice.

Osnovna opcija

Dakle, za većinu tablica na stranici koristim sljedeći css kod:

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

Određuje da riječi koje ne stanu u blok trebaju započeti razlučivošću manjom od 1000 px nova linija. Rezolucija 1000 je primjer, pogledajte svoje stranice, za neke ima smisla postaviti nižu rezoluciju.

Postići dobar prikaz tablica moguća je pomoću dvostrukog koda u CSS-u. Paralelno koristim:

@medijski zaslon i (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;)

Navodi se da se s rezolucijom manjom od 700 px tablica prikazuje u 100% veličini, odnosno komprimirana je, ali zauzima cijeli blok po širini. Svojstvo!important pokazuje da će se primjenjivati ​​na sve razlučivosti manje od 700px.

Adaptacija u jednoj koloni

Teže je prilagoditi tablicu tako da se prikazuje u jednom stupcu u niskoj rezoluciji. Nije prikladno za sve stolove, ali je često potrebno. Prvo odredite izvornu klasu za tablicu, na primjer,