V Aspro: Ďalej môžete od verzie 1.1.7 prispôsobiť tabuľky pre mobilná verzia. Je potrebné vykonať zmeny zdroj stránky - pridajte triedu, ktorá je zodpovedná za prispôsobivosť tabuliek.

Jednoduchá tabuľka v mobilnej verzii presahuje stránku.

Ak chcete, aby bola tabuľka responzívna, prejdite na úpravu stránky, na ktorú bola tabuľka pridaná. Potom prejdite do režimu úpravy zdrojového kódu.

Pred úvodným štítkom

pridať značku s triedou .

Po záverečnej značke

zadajte značku.

...

Uložte zmeny.

Teraz sa tabuľka posúva a nepresahuje rámec.

Pri horizontálnom rolovaní tabuľka nepresahuje rám, no pri rolovaní doprava v mobilnej verzii sa otvára bočné menu. Aby ste zabezpečili, že ponuka nebude prekážať pri práci s tabuľkou, musíte vykonať zmeny v kóde stránky.

Do značky, ktorú sme pridali skôr, musíme pridať triedu „swipeignore“. V dôsledku toho pred značkou

musí byť špecifikovaná značka s triedami.

...

Uložte zmeny.

Teraz sa pri posúvaní tabuľky doprava neotvára bočné menu, ktoré prekážalo pri práci s tabuľkou.

Bočnú ponuku môžete skryť pri posúvaní doprava a na iných stránkach. K značke bloku, pre ktorú chcete odstrániť zobrazenie bočnej ponuky, musíte pridať triedu „swipeignore“. Ak značka nemá špecifikovanú triedu, bude mať tvar . Ak už značka má pridané triedy, napíšte „swipeignore“ oddelené medzerou, napríklad .

Ak na stránke používate tabuľky, je potrebné ich tiež prispôsobiť mobilné zariadenia. Používam dve možnosti prispôsobenia - kompresiu a zalamovanie slov + usporiadanie tabuliek do jedného stĺpca.

Prvá možnosť je vhodná pre všetky viacstĺpcové tabuľky, na niektorých stránkach vo frontende používam druhú možnosť. Takouto slabinou je zobrazovanie menu vo forme tabuľky, no pri znížení rozlíšenia sú stlačené natoľko, že vyvolávajú u používateľa rozhorčenie. Preklad v nízkom rozlíšení v jednom stĺpci - dobré rozhodnutie, ale opäť by ste ho nemali používať pre všetky tabuľky.

Základná možnosť

Takže pre väčšinu tabuliek na webe používam nasledujúci kód css:

@media screen and (max-width:1000px)(td(word-break:break-all;)

Určuje, že slová, ktoré sa nezmestia do bloku, by mali začínať s rozlíšením menším ako 1000 px Nový riadok. Rozlíšenie 1000 je príklad, pozri si svoje stránky, pre niektorých má zmysel nastaviť rozlíšenie nižšie.

Dosiahnuť dobrý displej tabuľka je možná pomocou dvojitého kódu v CSS. Paralelne pouzivam:

@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 % !dôležité;) tabuľka, rozpätie, rozpätie, rozpätie (max. šírka: 100 % ! dôležité;)

Uvádza, že pri rozlíšení menšom ako 700 px sa tabuľka zobrazí v 100% veľkosti, teda je komprimovaná, no na šírku zaberá celý blok. Vlastnosť!important označuje, že sa bude vzťahovať na všetky rozlíšenia menšie ako 700 pixelov.

Prispôsobenie v jednom stĺpci

Náročnejšie je prispôsobiť tabuľku tak, aby sa zobrazovala v jednom stĺpci v nízkom rozlíšení. Nie je vhodný pre všetky stoly, ale často je potrebný. Najprv zadajte pôvodnú triedu tabuľky, napr.