Задать фон для чередующихся строк <DIV>

0

У меня есть таблица структуры <DIV>, я хочу дать цвет фона для альтернативных строк.

Первоначально моя структура <DIV> была такой (как показано в Fiddle - * Option 1): *

HTML

<div class="Case">
    <div class="group">
        <div class="Link subdiv">ghdfgdfg</div>
        <div class="Time subdiv"></div>
        <div class="Committer subdiv">gdfg</div>
        <div class="Description subdiv">dfgdfg</div>
        <div class="ChangeSetFiles subdiv">gdfgfgdg</div>
    </div>
    <div class="group">
        <div class="Link subdiv">ghdfgdfg</div>
        <div class="Time subdiv"></div>
        <div class="Committer subdiv">gdfg</div>
        <div class="Description subdiv">dfgdfg</div>
        <div class="ChangeSetFiles subdiv">gdfgfgdg</div>
    </div>
    <div class="group">
        <div class="Link subdiv">ghdfgdfg</div>
        <div class="Time subdiv"></div>
        <div class="Committer subdiv">gdfg</div>
        <div class="Description subdiv">dfgdfg</div>
        <div class="ChangeSetFiles subdiv">gdfgfgdg</div>
    </div>
    <div class="group">
        <div class="Link subdiv">ghdfgdfg</div>
        <div class="Time subdiv"></div>
        <div class="Committer subdiv">gdfg</div>
        <div class="Description subdiv">dfgdfg</div>
        <div class="ChangeSetFiles subdiv">gdfgfgdg</div>
    </div>
</div>

CSS

 .Case {
    border:1px solid #dbdbde;
    font-weight:normal;
}
.group {
    display:table;
    border-top: 1px solid #dbdbde;
    width: 100%;
}
.group div {
    vertical-align:top;
}
.group:nth-child(even) {
    background-color:#f9f9f9;
}
.subdiv {
    display:table-cell;
    border-left:1px solid #dbdbde;
    padding:10px;
    word-wrap: break-word;
}
.subdiv:nth-child(1) {
    border-left:none;
}

Он работал отлично! НО, когда я добавил еще одну строку "Пустой" DIV, этот " .group:nth-child(even) {background-color:#f9f9f9;} " код перестает работать.

(как показано в Fiddle - * Вариант 2): *

Вот код NEW: HTML

<div class="Case">
    <div class="group">
        <div class="Link subdiv">ghdfgdfg</div>
        <div class="Time subdiv"></div>
        <div class="Committer subdiv">gdfg</div>
        <div class="Description subdiv">dfgdfg</div>
        <div class="ChangeSetFiles subdiv">gdfgfgdg</div>
    </div>
     <div class="empty"></div>
    <div class="group">
        <div class="Link subdiv">ghdfgdfg</div>
        <div class="Time subdiv"></div>
        <div class="Committer subdiv">gdfg</div>
        <div class="Description subdiv">dfgdfg</div>
        <div class="ChangeSetFiles subdiv">gdfgfgdg</div>
    </div>
     <div class="empty"></div>
    <div class="group">
        <div class="Link subdiv">ghdfgdfg</div>
        <div class="Time subdiv"></div>
        <div class="Committer subdiv">gdfg</div>
        <div class="Description subdiv">dfgdfg</div>
        <div class="ChangeSetFiles subdiv">gdfgfgdg</div>
    </div>
     <div class="empty"></div>
    <div class="group">
        <div class="Link subdiv">ghdfgdfg</div>
        <div class="Time subdiv"></div>
        <div class="Committer subdiv">gdfg</div>
        <div class="Description subdiv">dfgdfg</div>
        <div class="ChangeSetFiles subdiv">gdfgfgdg</div>
    </div>
     <div class="empty"></div>
</div>

CSS тот же, что и добавленный стиль добавленного стиля для "пустого" класса

   .empty {
    background-color:#ccc;
    display:block;
    width:100%;
    height:15px;
}

Пожалуйста, предложите, что мне не хватает???

  • 0
    В ваших скрипках нет кода, и раскраска подходит для обоих.
  • 1
    Не отвечая на ваш вопрос - но задаюсь вопросом, почему вы воссоздаете таблицу, используя <div> , почему бы не использовать <table>
Показать ещё 4 комментария
Теги:

3 ответа

1
Лучший ответ

Ваша проблема в том, что n-й ребенок учитывает все элементы, а не только те элементы класса, которые вы задали в селекторе.

Одним из возможных решений является создание разделителя div.

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

HTML (фрагмент)

<h1>Option 2</h1>

<div class="Case sep">
    <div class="group">
        <div class="Link subdiv">ghdfgdfg</div>
        <div class="Time subdiv"></div>
        <div class="Committer subdiv">gdfg</div>
        <div class="Description subdiv">dfgdfg</div>
        <div class="ChangeSetFiles subdiv">gdfgfgdg</div>
    </div>
    <div class="group">
        <div class="Link subdiv">ghdfgdfg</div>

Я удалил пустые строки и добавил класс sep в контейнер.

В CSS добавьте

.sep .group {
    margin-bottom: 15px;
    box-shadow: 0px 15px #ccc;
}

демонстрация

Поделиться
2

Он разбивает первый формат, но вы можете попробовать

.group:nth-child(4n-1) {
    background-color:#f9f9f9;
}

Демо: скрипка

Поделиться
  • 0
    Спасибо за просмотр !!! Но это не работает для меня! просто чтобы уточнить больше .. не может быть N нет ".group" s .. 10..20..30 ... они генерируются во время выполнения !!
  • 0
    @ AT-UID похоже, что скрипка работает ... можете ли вы попытаться воссоздать проблему в скрипке ...
0

Извините, я не очень хорошо понимаю ваш вопрос, поэтому попробуйте это:

<div class="group empty"></div>
Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню