U Aspro-u: Dalje, počevši od verzije 1.1.7, možete prilagoditi tabele za mobilna verzija. Potrebno je izvršiti promjene na izvor stranice - dodajte klasu koja je odgovorna za prilagodljivost tabela.

Jednostavna tabela u mobilnoj verziji nadilazi stranicu.

Da bi tabela bila prilagodljiva, idite na uređivanje stranice na kojoj je tabela dodana. Zatim idite na mod za uređivanje izvornog koda.

Prije uvodne oznake

dodajte oznaku sa klasom .

Nakon završne oznake

unesite oznaku.

...

Sačuvajte promjene.

Sada se tabela pomiče i ne ide dalje od okvira.

Kada se pomiče horizontalno, tabela ne izlazi iz okvira, ali kada se krećete udesno u mobilnoj verziji, otvara se bočni meni. Kako biste osigurali da izbornik ne ometa rad s tablicom, potrebno je promijeniti kod stranice.

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

tag sa klasama mora biti specificiran.

...

Sačuvajte promjene.

Sada, prilikom pomicanja tabele udesno, bočni meni se ne otvara, što je ometalo rad sa tabelom.

Možete sakriti bočni meni kada se krećete desno i na drugim stranicama. Morate dodati klasu “swipeignore” u blok oznaku za koju želite ukloniti prikaz bočnog menija. Ako oznaka nije imala specificiranu klasu, ona će poprimiti oblik . Ako oznaka već ima dodane klase, onda napišite “swipeignore” odvojeno razmakom, na primjer .

Ako koristite tablice na stranici, onda ih je također potrebno prilagoditi mobilnih uređaja. Koristim dvije opcije prilagođavanja - kompresiju i prelamanje riječi + sređivanje tablica u jednoj koloni.

Prva opcija je pogodna za sve tabele sa više kolona; ja koristim drugu opciju na nekim sajtovima u frontendu. Tolika je slabost u prikazivanju menija u obliku tabele, ali kada se rezolucija smanji, oni se toliko komprimuju da izazivaju negodovanje kod korisnika. Prevod u niskoj rezoluciji u jednoj koloni - dobra odluka, ali, opet, ne biste ga trebali koristiti za sve tabele.

Osnovna opcija

Dakle, za većinu tabela na sajtu koristim sledeći css kod:

@media ekran i (max-width:1000px)(td(word-break:break-all;)

Navodi da riječi koje se ne uklapaju u blok trebaju početi s rezolucijom manjom od 1000 px nova linija. Rezolucija 1000 je primjer, pogledajte svoje stranice, za neke ima smisla podesiti nižu rezoluciju.

Achieve dobar displej tabela je moguća korištenjem dvostrukog koda u CSS-u. Uporedo koristim:

@media ekran i (max-width:700px)(img(max-width:96% !important;height:auto !important;) iframe, textarea, input, button, submit, video, object, embed(max-width: 99% !važno;) tabela, raspon, div, ins(max-width:100% !važno;)

Navodi da se sa rezolucijom manjom od 700 px tabela prikazuje u 100% veličini, odnosno komprimovana je, ali zauzima ceo blok po širini. Svojstvo!important označava da će se primjenjivati ​​na sve rezolucije manje od 700px.

Adaptacija u jednoj koloni

Teže je prilagoditi tabelu tako da se prikazuje u jednoj koloni pri niskoj rezoluciji. Nije prikladno za sve stolove, ali je često neophodno. Prvo navedite originalnu klasu za tablicu, na primjer,