Как сделать «зебру» в таблице

Эту заметку делаю для себя, чтобы в будущем не искать по исходникам.

Условие задачи: сделать таблицу с данными на сайте в виде «зебра», когда фон строк таблицы чередуется через одну.

Для реализации я нашел решение через псевдокласс :nth-child. Псевдокласс :nth-child используется для добавления стиля к элементам на основе нумерации в дереве элементов. Подробнее читайте здесь.

Пример:

Тариф «Normal» TOYOTA COROLLA TOYOTA CAMRY TOYOTA VERSO
КПП АКПП АКПП МКПП
1-3 суток 2500 3500 2500
4-7 суток 2300 3300 2300
8-15 суток 2100 3100 2100
16-30 суток 1900 2900 1900
TWD* 5250 7350 5250
Залог 7000 15000 7000

1. Для своей таблицы сделал идентификатор, который назвал «projekt».

Прописал его в html-код моей таблицы (здесь обязательно граница должна быть «0»):

<table id=»projekt» border=»0″ cellspacing=»1″ cellpadding=»1″ align=»center»>

2. В таблице стиле шаблона прописал условие для этого идентификатора следующим образом:

table#projekt tr:nth-child(even) {background-color: #f9f9f9; /* Цвет фона четной строки */}

table#projekt { border-collapse: collapse; border: 1px solid #E6E6E6; /*Убрал склеивание общих границ таблицы и назначил границу в 1 пикс серого цвета*/}

table#projekt td {padding: 6px 0 3px 10px; border: 1px solid #E6E6E6;/*Назначил стили ячеек*/}

Таким образом, каждая четная строка получила свой особенный фон. Для любой следующей я просто использую   id=»projekt». Приятного пользования и Вам.

,

Комментариев пока нет

Добавить комментарий