Я хочу создать html-таблицу с полосой зебры без использования каких-либо js-материалов или написания кода на стороне сервера для создания четных/нечетных классов для строк таблицы. Можно ли когда-нибудь использовать необработанный css?
Как создать полосы зебры на html-таблице без использования javascript и генерации четных/нечетных классов?
Ответы (5)
Это возможно с помощью селекторов CSS3:
tr:nth-child(even) {
background-color: red;
}
tr:nth-child(odd) {
background-color: white;
}
Согласно caniuse.com, сейчас его поддерживает каждый браузер.
tbody tr:nth-child(even)
, чтобы он применялся только к строкам в теле таблицы, а не к <thead>
или <tfoot>
, которые обычно имеют другой стиль.
- person craigpatik; 13.12.2013
Если все, что вы меняете, это цвет фона, то будет работать следующее, где test.gif представляет собой изображение высотой 40 пикселей с верхними 20 пикселями одного цвета и нижними 20 пикселями другого цвета. Если вам нужно изменить какие-либо другие свойства css, вы в значительной степени застряли.
table { background: url(test.gif) top; }
table tr { height: 20px; }
20px
по высоте.
- person Cypher; 20.03.2014
http://www.w3.org/Style/Examples/007/evenodd CSS 3 n-й дочерний элемент. Поскольку поддержка браузера ограничена, вы можете воспроизвести поведение с помощью Sizzle (например, включенного в jquery)
(В CSS ‹= 2) Нет. К сожалению, нет никаких селекторов (в CSS ‹= 2), которые работали бы на основе позиции (с точки зрения числа, которое находится в дочерних элементах родителя), что, как я полагаю, вам нужно было бы сделать это только с помощью CSS.
Примечание для себя: почитайте уже CSS3!
В 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) - я оставлю это просеивание вам.
+0
на 2n+0
- person Zac; 02.09.2016