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

Ответ 1

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

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

И класс вроде этого:

.even { background: #efefef; }

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

Ответ 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)

для класса.

Демо-версия!

Ответ 3

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

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

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

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

  Вердикт: Это будет работать только с одним родителем.

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

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

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

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

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

• В 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.

Ответ 4

Если использовать 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>

Ответ 5

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

w3c doc

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

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

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

Атрибут счетчика "треугольник" может быть определен как:

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

Затем будут создаваться списки, которые выглядят так:

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

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

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

Ответ 6

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

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