Creați o masă de zebră

Creați o masă de zebră


O masă de zebră este o masă în care culoarea de fundal a liniei se modifică după fiecare linie. Aceasta este, de exemplu, alb-negru-alb-negru. Aceasta este ceea ce vom face, folosind doar CSS.

Pentru a crea o "zebra" în tabel, puteți folosi JS. Dar această metodă va fi destul de supărătoare. Puteți crea manual "zebra", adică stilouri adăugând clase la etichetă . Această metodă este potrivită pentru mese mici. Și dacă în masă există multe linii? Apoi, fără automatizare va fi lung. Și ce să nu folosiți JS, este posibil să folosiți un CSS3 pseudo-clasă: n-copil.

Această pseudo-clasă a fost creată pentru a adăuga proprietăți unei etichete care se află sub un anumit număr. Puteți specifica că proprietățile sunt setate numai la etichete paralele sau impare. Practic, această pseudo-clasă poate aplica exact ceea ce este în tabele. Reguli de scriere: n-copil:

Valorile pot fi:

ciudate sunt numere impare (1, 3, 5, 7.).
chiar și - numere par (2, 4, 5, 6).
numărul este orice număr de la unul.

Dar această metodă are un minus: nu este acceptată în browserele mai vechi.

Și, pentru a crea un stil zebră în tabel, trebuie să faceți următoarele:


Atributul cellpacing specifică cât de mult să se retragă între celule. 0 - anulează indentarea.


Acest lucru am întrebat dacă eticheta va fi ciudat în cont, apoi va fi setat la culoarea de fundal #EDEDED. Puteți face același lucru și cu numerele paralele.

Să ne mai proiectăm tabelul:



Articole similare