Стиль, использующий nth-child, чтобы обновлять аспект таблицы (чередующиеся цвета строк)

Question

У меня есть таблица CSS, подобная этой:

(это надежное упрощение моей системы)

<div class="table">
    <div class="row">
        <div class="data">
        abc
        </div>
    </div>
    <div class="row">
        <div class="data">
        def
        </div>
    </div>
    <div class="row">
        <div class="data">
        ghi
        </div>
    </div>
    <div class="row">
        <div class="data">
        jkl
        </div>
    </div>
</div>

И у меня есть такой CSS-код:

div.table div.row:not(.hide):nth-child(2n){
    background-color: #D7D4DA;
}
div.table div.row:not(.hide):nth-child(2n+1){
    background-color: #E4E8EB;
}

.hide{
    display:none;
}

Цель: когда строка скрыта (с использованием класса hide), стилизация таблицы должна оставаться прежней (каждая строка различного цвета между двумя доступными).Вместо этого он сломан.

Согласно файербогу Firefox, :nth-child применяется до :not, а не после (как я хотел).Как это можно решить?

Примечание. Изменять HTML не стоит.Это что-то динамически созданное с использованием javascript.

Моя цель - не подсчитывать для n-го дочернего элемента строки, которые скрыты для поддержания стиля, даже если линия не видна

Answer 1

Чистый ответ CSS (CSS3)

Есть некоторые осторожные соображения, которые следует учитывать (см. Ниже), но , похоже, есть способ сделать это в чистом CSS (обратите внимание, что fiddle использует поддельную таблицу div для этого опубликовать, но это можно сделать с помощью реальных таблиц html), используя linear-gradient с цветными остановками (метод здесь ) на фоне table. Ключом к тому, чтобы сделать его гибким с изменениями * или 1010 * (или масштабированием), является установка части высоты background-size, равной удвоенному значению line-height, установленному для строк.

Вопросы:

1. line-height и font-size для row должны быть явно установлены с em единицами (кроме см. Примечание № 5 ниже).
2. Если для table задано padding (не рекомендуется), то, вероятно, потребуется выполнить какой-либо тип корректировки background-position или background-clip, чтобы приспособить заполнение.
3. Если на row установлена ​​верхняя или нижняя padding или margin, тогда она должна быть в em единицах и добавлена ​​к значению line-height перед вычислением удвоенной высоты linear-gradient.
4. Этот метод изменит цвет фона внутри строки , если в этой строке несколько строк ( см. последняя таблица в моем примере скрипка ).
5. Если в строках присутствовал какой-либо другой элемент с фиксированной высотой (для изображений установлено высотой 20 пикселей), тогда row высоту и linear-gradient высоту можно установить на основе значений пикселей.

Я не потратил время на то, чтобы поиграться с № 2 и № 3 выше, чтобы точно определить, какие именно корректировки необходимы, но теоретически должно быть возможно приспособить эти вещи при необходимости.