Чистое решение CSS3 для чередования таблиц с несколькими <tbody>элементами?

Question

У меня есть таблица с несколькими <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?

Answer 1

Если вы используете jQuery, тогда используйте селектор :even (отредактировано: для обработки видимости) вот так :

$("table tr:visible:even").addClass("even");​

И такой класс:

.even { background: #efefef; }

Опять же, это , если вы уже используете jQuery, если у вас нет чисто javascript-решения (включая любую библиотеку для , просто , это излишне), например, bobince опубликовано. В любом случае, я не вижу здесь чисто CSS-решения ... это определенно верный случай, но не то, что появляется достаточно часто, чтобы сделать его достойным спецификации.

Answer 2

Если у вас есть строки, которые имеют одинаковую высоту, вы можете обмануть с градиентом, например ::

#table {
    background-image: repeating-linear-gradient(pink 0, pink 1.6em, yellow 1.6em, yellow 3.2em);
    background-repeat: no-repeat;

    /* To account for headers; adjust size to account for footers.
     * You can also use a second (or third) gradient for both.
     */
    background-position: 0 1.4em;
}

Если вы можете гарантировать, что все элементы <tbody> имеют четное количество строк, вы также можете использовать это (даже если последний скрыт), но в противном случае вам не повезло. Селекторы 4-го уровня могут что-то сказать по этому поводу, но что-то вроде

#table > !tbody > tr:last-child:nth-child(even)

восполняет класс.

Демо!

Answer 3

После интенсивных исследований могу утверждать, что

Не существует чистого решения CSS3 (даже не CSS4) для сопоставления четных / нечетных строк по нескольким родителям.

Все решения, о которых вы думаете, невозможны:

1. Используйте псевдокласс :nth-child .

   Вердикт: Это будет работать только в пределах одного родителя.

2. Каким-то образом задействуйте теги tbody с нечетным числом строк (переключатели цвета), подсчитав их потомков и выделив их с нечетными строками аналогичным образом nth-child(odd) работает.

   Вердикт: В CSS невозможно сосчитать детей, см. этот вопрос . Остерегайтесь вводящего в заблуждение принятого ответа - это фактически подсчет братьев и сестер, а не детей

3. Попробуйте сопоставить только некоторые tbody s на основе правила CSS для некоторых детей и, таким образом, сможете идентифицировать tbody s с нечетным числом детей.

   Вердикт: В CSS невозможно сопоставить элементы по их дочерним элементам:

   • Применение стилей CSS к элементу в зависимости от его дочерних элементов
   • Сложный селектор CSS для родителя активного потомка
   • Есть ли родительский селектор CSS?
   • Выбор элемента на основе дочернего класса

4. CSS4 представляет новый селектор :nth-match, который звучит многообещающе, так как в нем нет слова «ребенок». Так что вам интересно, сработает ли это:

:nth-match(even of tr) { background-color: #ccc; }
:nth-match(odd of tr) { background-color: #fff; }

Вердикт: Не работает. Если вы посмотрите на описание, вы увидите, что оно будет делать то же самое, что и вы:

Запись псевдокласса :nth-match(An+B of <selector>) представляет элемент, имеющий An+B-1 siblings , которые соответствуют заданному списку селекторов перед ним в дереве документов.

Проблематичным является слово siblings , которое означает, что оно будет считать только в каждом теге tbody, как это делают селекторы :nth-child.

Заключение

Не существует чистого решения CSS (ни CSS3, ни CSS4). Вам придется воздержаться от:

• JavaScript, например замечательное решение jQuery, упомянутое Ником Крейвером;
• фоновый трюк minitech, но его использование ограничено строками равной высоты;
• изменения в коде генерации HTML.

Answer 4

Решение, которое сейчас не будет работать ни в одном браузере (насколько я знаю), будет использовать счетчики (на tr), а затем использовать его из стилей счетчиков w3c уровня 3:

w3c doc

3.1.1. Символы езды на велосипеде: «циклическая» система

Система циклического счетчика многократно циклически переключается символы, возвращаясь к началу, когда он достигает конца список. Может использоваться для простых пуль (просто предоставьте один счетчик символ), или для циклического перебора нескольких символов. Первый счетчик Символ используется как представление значения 1, второй символ счетчика (если он существует) используется как представление значение 2 и т. д.

Если система является «циклической», дескриптор «символов» должен содержать в хотя бы один встречный символ, иначе правило "@ counter-style" недействительным. Эта система определена для всех значений счетчиков.

Стиль счетчика «Треугольная пуля» можно определить как:

@ треугольник встречного стиля {система: циклическая; символы: ‣; суффикс: ''; }

Затем он создаст списки, похожие на:

‣ Один ‣ Два ‣ Три Если имеется N встречных символов и представление строится для целочисленного значения, представление является символом счетчика в индексе ((значение-1) mod N) из список счетчиков символов (0-индексированный).

Если я установлю это правило с 2 символами, один заполненный квадрат, а другой пустой квадрат, я получу псевдоэлемент, чередующийся между цветом и прозрачностью.

Тогда я могу заставить этот псевдоэлемент распространиться на все tr.

Answer 5

Если использовать JQuery, используйте этот код:

//style for even CSS Class
<style>.even { background: #efefef; } </style>

Добавление класса для каждой второй строки таблиц в целях стилизации

 <script>
   $('tbody').parents('.table-container').find('tr:even').addClass( 'even' );
 </script>

HTML-код

<div class="table-container">
    <table>
        <tbody>
          <tr> [ODD]
          <tr> [EVEN]
          <tr> [ODD]
        </tbody>
        <tbody>
          <tr> [ODD]
          <tr> [EVEN]
        </tbody>
    </table>
</div>

Answer 6

Да, я думаю, вам понадобится скрипт, так как нет селектора nth-grandchild, который работал бы относительно <table>. В любом случае вам понадобится скрипт, чтобы он работал в старых браузерах, так что, вероятно, это не имеет большого значения.

var table= document.getElementById('sometable');
for (var i= table.rows.length; i-->0;)
    table.rows[i].className= i%2===0? 'stripe-even' : 'stripe-odd';