V Aspro: Next, počínaje verzí 1.1.7, můžete přizpůsobit tabulky pro mobilní verze. Je třeba provést změny zdroj stránky - přidejte třídu, která je zodpovědná za přizpůsobivost tabulek.

Jednoduchá tabulka v mobilní verzi přesahuje stránku.

Aby byla tabulka responzivní, přejděte na úpravu stránky, na kterou byla tabulka přidána. Poté přejděte do režimu úpravy zdrojového kódu.

Před úvodním štítkem

přidat značku s třídou .

Po závěrečné značce

zadejte značku.

...

Uložte změny.

Nyní se tabulka posouvá a nepřesahuje rámec.

Při horizontálním rolování tabulka nepřesahuje rámeček, ale při rolování doprava v mobilní verzi se otevře postranní nabídka. Abyste zajistili, že nabídka nebude narušovat práci s tabulkou, musíte provést změny v kódu stránky.

Ke značce, kterou jsme přidali dříve, musíme přidat třídu „swipeignore“. V důsledku toho před značkou

musí být uveden tag s třídami.

...

Uložte změny.

Nyní se při rolování tabulky doprava neotevře boční nabídka, která překážela při práci s tabulkou.

Boční nabídku můžete skrýt při rolování doprava a na jiných stránkách. Třídu „swipeignore“ musíte přidat ke značce bloku, pro kterou chcete odstranit zobrazení postranní nabídky. Pokud značka neměla specifikovanou třídu, bude mít tvar . Pokud má značka již přidané třídy, napište „swipeignore“ oddělené mezerou, například .

Pokud na webu používáte tabulky, je třeba je také přizpůsobit mobilní zařízení. Používám dvě možnosti přizpůsobení - kompresi a zalamování slov + uspořádání tabulek do jednoho sloupce.

První možnost je vhodná pro všechny vícesloupcové tabulky, na některých webech ve frontendu používám druhou možnost. Takovou slabinou je zobrazování nabídek ve formě tabulky, ale při snížení rozlišení jsou zkomprimované natolik, že u uživatele vyvolávají rozhořčení. Překlad v nízkém rozlišení v jednom sloupci - dobré rozhodnutí, ale opět byste jej neměli používat pro všechny tabulky.

Základní možnost

Takže pro většinu tabulek na webu používám následující kód css:

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

Určuje, že slova, která se nevejdou do bloku, by měla začínat s rozlišením menším než 1000 px nový řádek. Rozlišení 1000 je příklad, podívejte se na své stránky, pro některé má smysl nastavit rozlišení nižší.

Dosáhnout dobrý displej tabulka je možná pomocí dvojitého kódu v CSS. Paralelně používám:

@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é;) tabulka, rozpětí, div, vs (max. šířka: 100 % !důležité;)

Uvádí, že při rozlišení menším než 700 px se tabulka zobrazí ve 100% velikosti, tedy je komprimovaná, ale na šířku zabírá celý blok. Vlastnost!important označuje, že se bude vztahovat na všechna rozlišení menší než 700 pixelů.

Adaptace v jednom sloupci

Obtížnější je přizpůsobit tabulku tak, aby se zobrazovala v jednom sloupci v nízkém rozlišení. Není vhodný pro všechny stoly, ale často je nezbytný. Nejprve zadejte původní třídu tabulky, např.