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

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


css html-table
person Vladimir    schedule 04.05.2010    source источник

Ответы (5)


arrow_upward
126
arrow_downward

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

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


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

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

person K. Norbert    schedule 04.05.2010
comment
под современным вы подразумеваете все, кроме IE7 и 8 - person Rod Johnson; 04.02.2011
comment
Вы, вероятно, захотите ограничить его как tbody tr:nth-child(even), чтобы он применялся только к строкам в теле таблицы, а не к <thead> или <tfoot>, которые обычно имеют другой стиль. - person craigpatik; 13.12.2013

arrow_upward
3
arrow_downward

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

table {  background: url(test.gif) top; }
table tr { height: 20px; }
person ScottE    schedule 04.05.2010
comment
Это исключительно негибкий подход. - person Mike Adler; 10.10.2013
comment
@Mike Adler - абсолютно, но для браузеров, которые не поддерживают: nth-child, и без изменений на стороне js/сервера вы мало что можете сделать. - person ScottE; 10.10.2013
comment
Умная. Однако это будет раздражать пользователей, которым нужно читать текст большего размера, чем помещается в ячейку 20px по высоте. - person Cypher; 20.03.2014

arrow_upward
1
arrow_downward

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

person Francisco Aquino    schedule 04.05.2010

arrow_upward
0
arrow_downward

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

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

person icio    schedule 04.05.2010

arrow_upward
0
arrow_downward

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

person ANeves thinks SE is evil    schedule 04.05.2010
comment
Вам даже не нужен +0 на 2n+0 - person Zac; 02.09.2016