Подтвердить что ты не робот

CSS Alternate Rows - некоторые строки скрыты

Я пытаюсь создать таблицу таким образом, чтобы каждая строка была другого цвета (нечетная/четная). У меня есть следующий CSS:

#woo tr:nth-child(even) td {
    background-color: #f0f9ff;
}

#woo tr:nth-child(odd) td {
    background-color: white;
}

Однако некоторые из моих строк могут быть скрыты, и мне все равно понравятся чередующиеся строки. Как я могу отрегулировать выше, чтобы он отображал альтернативные строки, даже если строки, которые находятся рядом друг с другом, не обязательно являются нечетными и даже?

4b9b3361

ОТВЕТЫ

Ответ 1

Если вы используете jQuery, вы можете использовать одну из своих функций, например .filter(), чтобы выбрать только видимые элементы. Но ключ здесь - селектор CSS :visible.

Например (см. jsfiddle):

jQuery('tr:visible:odd').css({'background-color': 'red'});
jQuery('tr:visible:even').css({'background-color': 'yellow'});

Ответ 2

Я решил эту проблему, используя фоновое изображение для таблицы, состоящее из двух альтернативных цветов. Это делает решение не совсем полного CSS, так как оно включает в себя создание изображения, но оно должно очень хорошо масштабироваться для таблиц с тысячами записей.

Фоновое изображение в кодировке base64 ниже - это изображение 1x50 с верхними 25 пикселями в качестве одного цвета, а нижние 25 пикселей в качестве альтернативного цвета.

table {
  border-collapse: collapse;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAyCAIAAAASmSbdAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3wQbATAssXhCIwAAABl0RVh0Q29tbWVudABDcmVhdGVkIHdpdGggR0lNUFeBDhcAAAAYSURBVAjXY/j8/joTAwMDTfGXDzdpbQcATuQF2Ze0VigAAAAASUVORK5CYII=);
}
  
td {
   padding: 2px 4px;
   height: 21px;
}
<table>
    <tbody>
        <tr style="display: table-row;">
            <td>ANIMAL!!</td>
        </tr>
        <tr style="display: table-row;">
            <td>Beaker</td>
        </tr>
        <tr style="display: none;">
            <td>Bunsen Honeydew, Ph.D.</td>
        </tr>
        <tr style="display: table-row;">
            <td>Camilla the Chicken</td>
        </tr>
        <tr style="display: table-row;">
            <td>Dr. Julius Strangepork</td>
        </tr>
        <tr style="display: none;">
            <td>Dr. Teeth</td>
        </tr>
        <tr style="display: none;">
            <td>Floyd Pepper</td>
        </tr>
        <tr style="display: none;">
            <td>Gonzo</td>
        </tr>
        <tr style="display: table-row;">
            <td>Janice</td>
        </tr>
        <tr style="display: none;">
            <td>Miss Piggy</td>
        </tr>
        <tr style="display: none;">
            <td>Rizzo</td>
        </tr>
        <tr style="display: none;">
            <td>Robin the Frog</td>
        </tr>
        <tr style="display: table-row;">
            <td>Sam the Eagle</td>
        </tr>
        <tr style="display: table-row;">
            <td>Statler</td>
        </tr>
        <tr style="display: none;">
            <td>The Swedish Chef</td>
        </tr>
        <tr style="display: table-row;">
            <td>Waldorf</td>
        </tr>
        <tr style="display: none;">
            <td>Zoot</td>
        </tr>
    </tbody>
</table>

Ответ 3

Это сложная проблема, я просто провел некоторое время с помощью CSS2 и 3 селекторов, и я не уверен, что мы еще там. Что-то вроде этого должно быть возможно, но не работает:

tr td {background-color:white;}
tr td:not([style="display:none"]):nth-of-type(even) {
    background-color:#f0f9ff;
}

<tr><td>1</td></tr>
<tr><td style="display:none">2</td></tr>
<tr><td>3</td></tr>

Кажется, вы застряли с расширением jQuery :visible (не родным CSS), но если он работает медленно, определенно разбивайте страницы на строки, как говорит @Ionut.

Ответ 4

Я понимаю, что это очень поздно, но сегодня я столкнулся с этой проблемой и придумал чистое решение CSS с использованием формулы nth-child. Я не знаю, соответствует ли он вашему точному сценарию, но если каждая другая строка скрыта, но вам все еще нужны видимые строки, чередующиеся цвета, это отлично работает. Селектор CSS выглядит следующим образом:

tr:nth-child(4n - 1) { background-color: grey; }

Вот скрипка, показывающая ее в действии.

Это делает каждую видимую строку серой. Для получения дополнительной информации о том, как работают эти формулы, это отличный учебник.

Ответ 5

Так как "недостающее полосовое явление" возникает только в том случае, если число строк нечетное скрыто, вы можете уйти с добавлением единственной невидимой строки , где нечетное число строк скрывается.

Row 1
Row 2
Row 3 (hidden)
Padding (hidden)
Row 4
Row 5

Если это действительно хорошее решение, сильно зависит от вашего текущего кода, например. как вы создаете таблицу и как скрыты строки.

Но если ваши таблицы огромны и большие куски последовательных строк скрыты, это будет работать намного лучше, чем решение Javascript/jQuery.