Datu tabulas ne pārāk labi apstrādā adaptīvo dizainu. Diemžēl šis brīdis pastāv. Adaptīvais dizains ir saistīts ar dizaina pielāgošanu, lai tas atbilstu dažādiem ekrāna izmēriem. Tātad, kas notiek, ja ekrāns ir šaurāks par minimālo datu tabulas platumu? Varat tālināt un redzēt visu tabulu, taču teksta izmērs būs pārāk mazs, lai to izlasītu. Vai arī varat tuvināt lasīšanas punktu, taču jums būs jāritina vertikāli horizontāli un (diemžēl), lai skatītu tabulu. Datu tabulas var būt diezgan plašas, un tās noteikti ir. Tabulas var padarīt elastīgas platumā (svars=100%), bet šūnu saturs var kļūt tik šaurs, ka to vienkārši nevar redzēt.

Lai izvairītos no šī nepatīkamā brīža, tiek izmantotas adaptīvās tabulas. Šādā tabulā tiks parādīta horizontāla ritjosla, ja ekrāns ir pārāk mazs, lai parādītu visu saturu.

Lai izveidotu adaptīvu tabulu, pievienojiet konteinera elementu overflow-x:auto apkārt

Piezīme. Operētājsistēmā OS X Lion (operētājsistēmā Mac) ritjoslas pēc noklusējuma ir paslēptas un tiek rādītas tikai lietošanas laikā (pat ja ir iestatīta vērtība “overflow:scroll” vai auto).

Adaptīvās tīmekļa vietnes jau sen vairs nav kuriozs, un tās kļūst arvien izplatītākas. Ņemot vērā jaunākās ziņas par meklētājprogrammu klasifikāciju (ja kāds nezina, tad meklējumos no mobilās ierīces prioritāte ir responsīvajām vietnēm), šādu vietņu skaits turpinās pieaugt. Jūs varat būt pret pielāgošanu mobilajām ierīcēm vai par, taču fakts paliek fakts: klienti arvien vairāk pieprasa, lai viņu vietne būtu adaptīva, un tīmekļa pārziņiem tas ir jādara.

Viena no galvenajām problēmām, pielāgojot vietni dažādām izšķirtspējām, ir tabulas. It īpaši, ja tajos ir daudz datu. Apskatīsim divus veidus, kā izkārtot atsaucīgu tabulu.

Vispirms apskatīsim, kā izskatās tabula:

Būsim godīgi: šādu tabulu nevar saukt par patiesi adaptīvu. Tā izskatās labi mobilajā ierīcē, nekas nekur neizceļas, un vietnes izkārtojums neplūst. Šī metode ir piemērota, ja jūsu vietnē ir reti sastopamas tabulas un nav jēgas pievienot kādu spraudni un rakstīt papildu stilus to dēļ. Šo metodi izmanto Bootstrap. Tātad, kā tas darbojas?

Tas ir vienkārši: tabula ir iesaiņota div, kas ir iestatīts uz maksimālo platumu 100% un pārpildes: auto.

Ja galds ir garš, varat arī iestatīt maksimālo augstumu un salabot tabulas galveni.

Rezultātu, tāpat kā nākamo piemēru, var apskatīt šajā lapā.

Ja jūsu vietnē bieži ir tabulas, ir lietderīgi izmantot Footable spraudni.

Vispirms jums ir jāpievieno spraudnis (lejupielādējiet to vietnē GitHub vai pievienojiet to no CDN) un arī inicializējiet to:

$(funkcija() ( $(.tabula").footable(); ));

Šeit mums kaut kas jāprecizē: nez kāpēc skripts neskaita skata loga platumu, bet gan tabulas platumu. Lai to labotu, jums ir nedaudz "jāmodernizē" skripts:

JQuery(funkcija () ( jQuery(.table").footable(( aprēķinātWidthOverride: function()) (atgriešanās (width: jQuery(window).width()); ) )); ))

Inicializācijā mēs norādām tabulas klasi vai tikai tabulas tagu, ja vēlamies, lai visas vietnes tabulas būtu adaptīvas.

Ko tas viss nozīmē? Planšetdatoros slejas “RAM”, “Diagonal”, “PPI” un “Battery” tiks paslēptas. Ja tas tiek samazināts līdz tālruņiem, tiem pievienosies arī sleja “Cena”.

Inicializācijā var norādīt kontrolpunktus:

JQuery(funkcija () ( jQuery(.table").footable((callWidthOverride: function()) (atgriešanās (width: jQuery(window).width()); ), pārtraukuma punkti: (mobilais: 0, planšetdators: 720, darbvirsma: 1024 ) ));

Tas nozīmē, ka diapazonā no 0 līdz 720 noteikums attiecas uz mobilajām ierīcēm, no 720 līdz 1024 uz planšetdatoriem un virs 1024 uz galddatoriem. Nekas neliedz jums izveidot vēl vairāk noteikumu, ja nepieciešams.

Varat arī pārliecināties, vai kāda kolonna pēc noklusējuma ir izvērsta. Lai to izdarītu, norādiet datu atribūtu data-expanded="true"

Spraudņa iespējas ar to nebeidzas, taču ar to pilnīgi pietiek, lai izveidotu adaptīvas tabulas. Nākamreiz izskatīsim citas iespējas.

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].

Ja HTML tabulā ir pārāk daudz datu, tā kļūst plašāka par lapā pieejamo vietu un sāk pārpildīt. Lai labotu situāciju, tabulai varat pievienot horizontālo ritināšanu. Piemērs:

HTML/XHTML. Kods:

1

2

3

4

5

6

7

8

9

10

Tabulas_dati_1

Tabula_dati_2

Tabulas_dati_3

Tabula_dati_4

Tabula_dati_5

Tabula_dati_6

Tabula_dati_7

Tabula_dati_8

Tabula_dati_9

Tabula_dati_10

tabula (displejs: bloks; pārpilde-x: automātisks;)

/* Papildu CSS, lai sniegtu piemēra izskatu: */

tabula (robežas sabrukums: sabrukums;)

tabula td,th (polsterējums: 10 pikseļi; apmale: 1 px # 000 cieta;)

Piezīme. CSS rekvizītu displejs: bloks padara to tā, lai tabula aizņemtu tikai tik daudz platuma, cik nepieciešams datu izvietošanai bez vizuāliem kropļojumiem. Ne vairāk, neizstiepjot visā lapas pieejamās vietas platumā. Pat ja platums: 100% tiek pievienots CSS kodam. Piemērs:

Aliosque subditos un tēma

Ir daudz tiešsaistes pakalpojumu, lai izveidotu sitemap.xml. Tomēr varat to izdarīt pats savā datorā, izmantojot lynx pārlūkprogrammu un vairākas Linux komandrindas utilītas. Tālāk ir sniegts bash skripta "sitemap.sh" piemērs, kas tos izmanto. Bash skripts, kas izveido failu 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 cat /home/me/sitemap/www/traverse.dat | sed -e "s/\\.//g" | šķirot | 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/