Добавить другой фон на каждую четную строку таблицы / css3

Добавить другой фон на каждую четную строку таблицы / css3

Довольно интересный вопрос уже с давних времен. А как сделать так, чтобы таблица раскрашивалась по-разному? Например, чтобы каждая четная строка была белой, а каждая нечетная - черной?

Можно это сделать с помощью javascript, но легче и удобнее использовать новые технологии в css. Для этого надо использовать псевдоклассы. И в css3 ввели следующий: :nth-child(2n). Именно он говорит о том, что стили в нем следует применить к каждому 2 элементу в списке. Таким образом, чтобы раскрасить каждую вторую строку таблицы в белый цвет, а каждую первую в черный, можно использовать следующий синтаксис:

table {
	width:100%;
	background-color:black;
	color:red;
}
tr:nth-child(2n) {
	background-color:white;
}
<table>
<tr>
<td>
Первая строка таблицы
</td>
</tr>
<tr>
<td>
Вторая строка таблицы
</td>
</tr>
<tr>
<td>
Первая строка таблицы
</td>
</tr>
<tr>
<td>
Вторая строка таблицы
</td>
</tr>
</table>

Все просто:) В 8 IE не работает.

Demo

04.04.17
Для просмотра сайта обновите браузер.