Noțiuni de bază cu un marcaj
Structura tabelului este similară tabelului din exemplul cu OpenType, numai aici sunt adăugate id-ul și clasa (etichetele de închidere opționale au fost eliminate pentru a simplifica codul).
CSS este, de asemenea, foarte asemănătoare. Am scris acest exemplu pe Sass:
Rânduri și coloane rotative
Structura actuală a tabelului este scrisă în JS în variabila completă. Fără JS, masa va fi afișată, dar nu se va roti.
Curs practic pe aterizare adaptivă de la zero!
Aflați de la zero pentru a adapta aterizările adaptive la HTML5 și CSS3 în următoarele 6 zile
Toate variabilele dețin o parte a tabelului.
Funcția pivotTable modifică rândurile și coloanele în locuri. Celulele anteturilor care sunt în stânga sunt deplasate în sus. Pur și simplu semantic (și din punct de vedere al perspectivelor) nu se schimbă nimic, se schimbă doar speciile.
După lovitura de stat, clasa se schimbă de la mare la mic. Versiunea inversată a structurii tabelului este scrisă la variabila slimTable, astfel încât tabela să nu revină din nou când se modifică dimensiunea ferestrei de vizualizare.
Funcția pivotTable este lansată după încărcarea paginii:
Nu avem nevoie pentru a verifica funcția de apel PivotTable de fiecare dată când modificați dimensiunea portului de vizualizare (acest lucru se va lovi de performanță), așa că am renunțat reporni în mod forțat timp de 200 de milisecunde, atunci când are loc un eveniment și redimensionare:
Încetinirea se face prin intermediul funcției:
concluzie
Tehnica nu este potrivită pentru toate tabelele (în care există prea multe coloane și rânduri), dar poate fi utilă pentru tabele, ca în exemplul nostru.
Ediție: Comanda webformself.
Curs practic pe aterizare adaptivă de la zero!
Aflați de la zero pentru a adapta aterizările adaptive la HTML5 și CSS3 în următoarele 6 zile
Cele mai recente știri despre dezvoltarea IT și web pe canalul nostru de telegrame
Bootstrap framework: practica de configurare adaptivă de la A la Z
Învață să faci site-uri să utilizeze toate funcțiile din cadrul Bootstrap.
Articole similare
-
Cum se construiește un tabel rezumativ pentru mai multe tablouri (coli)
-
Partajarea funcțiilor excel și php de export pentru a crea tabele pivot
Trimiteți-le prietenilor: