Как создать полосы зебры на HTML-таблицы без использования JavaScript и генерации четных / нечетных классов?

Question

Я хочу разбить зебра на html-таблицу без использования js-материалов или написания кода на стороне сервера для генерации четных / нечетных классов для строк таблицы. Можно ли когда-нибудь использовать raw css?

Answer 1

Возможно, с помощью селекторов CSS3:

tr:nth-child(even) {
  background-color: red;
}


tr:nth-child(odd) {
  background-color: white;
}

Согласно caniuse.com , каждый браузер поддерживает его сейчас.

Answer 2

Если все, что вы изменяете, это цвет фона, то будет работать следующее: где test.gif - это изображение высотой 40px с одним верхним 20px одним цветом, а нижние 20 пикселей другим. Если вам нужно изменить какие-либо другие свойства CSS, вы в значительной степени застряли.

table {  background: url(test.gif) top; }
table tr { height: 20px; }

Answer 3

http://www.w3.org/Style/Examples/007/evenodd CSS 3 nth-child. Поскольку поддержка браузера ограничена, вы можете воспроизвести поведение с помощью Sizzle (входит, например, в jquery)

Answer 4

В http://www.w3.org/TR/css3-selectors/#structural-pseudos вы можете найти объяснение и примеры использования nth-child:

tr:nth-child(2n+1) /* represents every odd row of an HTML table */ {
  background-color: green;
}
tr:nth-child(odd)  /* same */ {
  background-color: green;
}
tr:nth-child(2n+0) /* represents every even row of an HTML table */ {
  background-color: pink;
}
tr:nth-child(even) /* same */ {
  background-color: pink;
}

Удачи с совместимостью с браузером - она ​​вам понадобится.
Есть хаки, чтобы заставить его работать в IE (используя JS) - я оставлю это просеивание для вас.

Answer 5

(в CSS

Примечание для себя: прочитайте уже CSS3!