Добавить другой фон на каждую четную строку таблицы / 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 не работает.