Чистое решение CSS3 чередовать таблицу с несколькими <tbody> элементами?
У меня есть таблица с несколькими <tbody> элементы. В установленный срок, только один <tbody> отображен, или все они отображены.
Я в настоящее время использую этот код CSS3 для чередования таблицы:
table tr:nth-child(even) {
background: #efefef;
}
Когда сингл <tbody> элемент показывают, все (очевидно) прекрасно, но когда несколько <tbody> элементы показывают, правила CSS относятся к каждому отдельно и каждому <tbody> имеет его собственную “систему дорожек”. Вместе дорожки могут или не могут выглядеть последовательными, в зависимости от количества строк.
<tbody>
<tr> [ODD]
<tr> [EVEN]
<tr> [ODD]
</tbody>
<tbody>
<tr> [ODD]
<tr> [EVEN]
</tbody>
…
Я должен был бы абсолютно использовать JavaScript (… jQuery) для фиксации этого? Или есть ли чистое решение CSS?
2 ответа
Если вы используете jQuery, тогда используйте селектор : even , (отредактировано: для управления видимостью) , как это :
$("table tr:visible:even").addClass("even");
И такой класс:
.even { background: #efefef; }
Опять же, это , если вы уже используете jQuery, если вы не используете чистое решение javascript (включая любую библиотеку для только это перебор) как bobince опубликовал. В любом случае я не вижу здесь решения на чистом CSS ... это определенно допустимый случай, но не то, что встречается достаточно часто, чтобы сделать его пригодным для спецификации.
Да, я думаю, вам понадобится скрипт, поскольку нет селектора nth-grandchild , который работал бы относительно . В любом случае вам понадобится скрипт, чтобы он работал в старых браузерах, так что, вероятно, не имеет большого значения.
var table= document.getElementById('sometable');
for (var i= table.rows.length; i-->0;)
table.rows[i].className= i%2===0? 'stripe-even' : 'stripe-odd';
Похожие вопросы: