Зебра таблица в CSS

Зебра маса - това е таблица с редуващи се цветове.

За да създадете „зебра“ в таблица, можете да използвате JS. Но този метод ще бъде доста обезпокоителен. Можете да създадете „зебра“ ръчно, тоест за всеки маркер тр добавете класове. Това е добре за малки маси. Но какво, ако в таблицата има много редове? Тогава ще отнеме много време без автоматизация. И за да не използвате JS, можете да използвате CSS3 псевдоклас : n-то дете.

Псевдо клас : n-то дете използва се за добавяне на стил към елементи въз основа на номериране в дървото на елементите.

Синтаксис

Стойностите могат да бъдат:

странно - Всички нечетни номера на артикули.

дори - Всички четни номера на артикули.

номер - Поредният номер на детето спрямо родителя му. Номерирането започва от 1, това ще бъде първият елемент в списъка.

израз - Посочено като + b, където a и b са цели числа, а n е брояч, който автоматично приема стойността 0, 1, 2.

Така че нека се захващаме за работа, първо трябва да създадем таблица.

Атрибут клетъчен интервал определя колко да се отстъпва между клетките. 0 - отменя отстъп.

Атрибут граница - това са граници на таблици

С това сме задали, че ако тагът тр ще бъде странно, тогава ще му бъде даден цвят на фона # c8c8c8.