Dátové tabuľky veľmi dobre nezvládajú responzívny dizajn. Bohužiaľ, tento moment existuje. Responzívny dizajn je o prispôsobení dizajnu rôznym veľkostiam obrazovky. Čo sa teda stane, keď je obrazovka užšia ako minimálna šírka tabuľky údajov? Môžete oddialiť a zobraziť celú tabuľku, ale veľkosť textu bude príliš malá na čítanie. Alebo si môžete priblížiť bod čítania, ale budete sa musieť posunúť vertikálne vodorovne a (bohužiaľ) zobraziť tabuľku. Tabuľky údajov môžu byť dosť široké a určite sú. Tabuľky môžu byť flexibilné na šírku (hmotnosť=100%), ale obsah buniek sa môže tak zúžiť, že ho jednoducho nie je vidieť.

Aby sa predišlo tomuto nepríjemnému momentu, používajú sa adaptívne tabuľky. Takáto tabuľka zobrazí vodorovný posúvač, ak je obrazovka príliš malá na zobrazenie celého obsahu.

Ak chcete vytvoriť responzívnu tabuľku, pridajte prvok kontajnera overflow-x:auto okolo

Poznámka. V OS X Lion (na Macu) sú posuvné lišty predvolene skryté a zobrazujú sa iba pri používaní (aj keď sú nastavené na „overflow:scroll“ alebo auto).

Adaptívne webové stránky už dávno nie sú kuriozitou a stávajú sa čoraz bežnejšími. Vzhľadom na najnovšie správy o hodnotení vo vyhľadávačoch (ak niekto nevie, pri vyhľadávaní z mobilného zariadenia majú prioritu responzívne stránky), počet takýchto stránok bude naďalej rásť. Môžete byť proti prispôsobeniu pre mobilné zariadenia alebo za, ale faktom zostáva: klienti čoraz častejšie požadujú, aby ich web bol prispôsobivý a webmasteri to musia robiť.

Jedným z hlavných problémov pri prispôsobovaní stránky rôznym rozlíšeniam sú tabuľky. Najmä ak obsahujú veľa údajov. Pozrime sa na dva spôsoby rozloženia responzívnej tabuľky.

Najprv sa pozrime, ako vyzerá tabuľka:

Buďme úprimní: takúto tabuľku nemožno nazvať skutočne adaptívnou. Vyzerá dobre na mobile, nikde nič nevyčnieva a rozloženie stránky „nepreteká“. Táto metóda je vhodná, ak sú tabuľky na vašom webe zriedkavé a nemá zmysel kvôli nim pripájať nejaký doplnok a písať ďalšie štýly. Túto metódu používa Bootstrap. Ako to teda funguje?

Je to jednoduché: stôl je zabalený do div, ktorý je nastavený na maximálnu šírku 100% a pretečenie: auto.

Ak je stôl dlhý, môžete nastaviť aj maximálnu výšku a upevniť záhlavie stola.

Výsledok, podobne ako nasledujúci príklad, si môžete pozrieť na tejto stránke.

Ak máte na svojej stránke často tabuľky, má zmysel použiť doplnok Footable.

Najprv musíte pripojiť doplnok (stiahnuť ho na GitHub alebo ho pripojiť z CDN) a tiež ho inicializovať:

$(funkcia() ( $(".tabuľka").footable(); ));

Tu si musíme niečo ujasniť: z nejakého dôvodu skript nepočíta šírku výrezu, ale šírku tabuľky. Ak to chcete vyriešiť, musíte skript mierne „modernizovať“:

JQuery(funkcia () ( jQuery(".tabuľka")).footable(( vypočítaťWidthOverride: function() ( return (width: jQuery(window).width()); ) )); ))

Pri inicializácii uvádzame triedu tabuľky alebo len značku tabuľky, ak chceme, aby boli všetky tabuľky na stránke adaptívne.

Čo to všetko znamená? Na tabletoch budú stĺpce „RAM“, „Uhlopriečka“, „PPI“ a „Batéria“ skryté. Po zredukovaní na telefóny sa k nim pripojí aj stĺpec „Cena“.

Kontrolné body je možné zadať pri inicializácii:

JQuery(funkcia () ( jQuery(".table")).footable(( vypočítaťWidthOverride: function() ( return (width: jQuery(window).width()); ), body prerušenia: ( mobil: 0, tablet: 720, desktop: 1024 ) ));

To znamená, že v rozsahu 0-720 platí pravidlo pre mobil, 720-1024 pre tablet a nad 1024 pre počítač. Nič vám nebráni v tom, aby ste v prípade potreby vytvorili ešte viac pravidiel.

Môžete sa tiež uistiť, že niektorý stĺpec je predvolene rozbalený. Ak to chcete urobiť, zadajte atribút údajov data-expanded="true"

Možnosti doplnku tam nekončia, ale na vytváranie adaptívnych tabuliek to stačí. Na ďalšie možnosti sa pozrieme nabudúce.

Windows: Internet Explorer 10.0+, Firefox 1.5+, Google Chrome, Opera 9.5+, Safari 3.1+, SeaMonkey 1.0+ [1].

Linux: Firefox 1.5+, Google Chrome / Chromium, Opera 9.5+, SeaMonkey 1.0+ [2].

Ak tabuľka HTML obsahuje príliš veľa údajov, bude širšia ako dostupný priestor na stránke a začne pretekať. Ak chcete situáciu napraviť, môžete do tabuľky pridať horizontálne posúvanie. Príklad:

HTML/XHTML. kód:

1

2

3

4

5

6

7

8

9

10

Tabuľkové_údaje_1

Tabuľkové_údaje_2

Tabuľkové_údaje_3

Tabuľkové_údaje_4

Tabuľkové_údaje_5

Tabuľkové_údaje_6

Tabuľkové_údaje_7

Tabuľkové_údaje_8

Tabuľkové_údaje_9

Tabuľkové_údaje_10

tabuľka (zobrazenie: blok; pretečenie-x: auto;)

/* Dodatočné CSS, len aby sme dali príkladu nejaký vzhľad: */

tabuľka (border-collapse: kolaps;)

tabuľka td,th (odsadenie: 10px; orámovanie: 1px #000 plné;)

Poznámka: Blok vlastností CSS display: umožňuje, aby tabuľka zaberala len toľko šírky, koľko potrebuje na uloženie údajov bez vizuálneho skreslenia. Nič viac, bez roztiahnutia cez celú šírku dostupného priestoru na stránke. Aj keď sa do kódu CSS pridá šírka: 100 %. Príklad:

Aliosque subditos a téma

Existuje mnoho online služieb na vytváranie sitemap.xml. Môžete to však urobiť sami na svojom počítači pomocou prehliadača lynx a niekoľkých nástrojov príkazového riadka systému Linux. Nasleduje príklad bash skriptu s názvom „sitemap.sh“, ktorý ich používa. Bash skript, ktorý vytvára súbor sitemap.xml: #!/bin/bash cd /home/me/sitemap/www/ lynx -crawl -traversal -accept_all_cookies -connect_timeout=30 http://www.compmiscellanea.com/ > / dev /null cd /home/me/sitemap/www2/ lynx -crawl -traversal -accept_all_cookies -connect_timeout=30 http://compmiscellanea.com/ > /dev/null cat /home/me/sitemap/www2/traverse.dat > > /home/me/sitemap/www/traverse.dat mačka /home/me/sitemap/www/traverse.dat | sed -e "s/\\.//g" | triediť | uniq > /home/me/sitemap/sitemap/sitemap.xml sed -i "s/\&/\&\;/g" /home/me/sitemap/sitemap/sitemap.xml sed -i "s/"/ \&apos\;/g" /home/me/sitemap/sitemap/sitemap.xml sed -i "s/"/\"\;/g" /home/me/sitemap/sitemap/sitemap.xml sed -i " s/>/\>\;/g" /home/me/sitemap/sitemap/sitemap.xml sed -i "s/