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

Ответ 1

Возможно, с селекторами CSS3:

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


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

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

Ответ 2

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

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

Ответ 3

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

Ответ 4

(В CSS <= 2) Нет. К сожалению, нет селекторов (в CSS <= 2), которые работают в зависимости от позиции (в терминах числа, которое оно находится внутри него родительских детей), которые, я считаю, вам нужно будет сделать это только с помощью CSS.

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

Ответ 5

В 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). Я оставлю это просеивание.