Как создать дорожки зебры на таблице HTML, не используя JavaScript и ровное/нечетное поколение классов?
Я хочу к дорожке зебры таблицу HTML, не используя материала js или пишущий серверный код для генерации ровных/нечетных классов для строк таблицы. Когда-либо возможно сделать использующую необработанную CSS?
5 ответов
Возможно, с селекторами CSS3:
tr:nth-child(even) {
background-color: red;
}
tr:nth-child(odd) {
background-color: white;
}
Согласно caniuse.com , каждый браузер теперь поддерживает его.
http://www.w3.org/Style/Examples/007/evenodd CSS 3 nth-child. Поскольку поддержка браузера ограничена, вы можете воспроизвести поведение с помощью 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) - я оставлю это вам.
Если вы меняете только цвет фона, то подойдет следующее, где test. gif - это изображение высотой 40px, где верхние 20px одного цвета, а нижние 20px другого цвета. Если вам нужно изменить какие-либо другие свойства css, то вы практически застряли.
table { background: url(test.gif) top; }
table tr { height: 20px; }