2

Добрый день!

Имеется таблица:

<table>
    <tr class="col-one"><td colspan="5"></td></tr>
    <tr>
        <td rowspan="2">&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td colspan="4">&nbsp;</td>
    </tr>
    <tr>
        <td rowspan="2">&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td colspan="4">&nbsp;</td>
    </tr>
    <tr>
        <td rowspan="2">&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td colspan="4">&nbsp;</td>
    </tr>
    <tr class="col-one"><td colspan="5"></td></tr>
</table>

Нужно за счёт лишь CSS (без использования js) окрасить каждую вторую строку в нужный цвет. Как это можно сделать?

Следует обратить особое внимание на то, что в таблице имеются двойные строки, которые должны быть одного цвета.

Добавлено после первого ответа: Следует так же учесть то, что первая и последняя строки динамически добавляются за счёт js. Нужно сделать так, чтобы не городить сложные манипуляции в разных местах, а обойтись лишь CSS правилами.

3 ответа 3

3

table, tr, td {
  border: 1px solid;
  border-collapse: collapse;
  width: 100%;
  table-layout: fixed;
  height: 1em;
}

tr:nth-child(even) {
  background: silver;
}
<table>
    <tr class="col-one"><td colspan="5"></td></tr>
    <tr>
        <td rowspan="2">&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td colspan="4">&nbsp;</td>
    </tr>
    <tr>
        <td rowspan="2">&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td colspan="4">&nbsp;</td>
    </tr>
    <tr>
        <td rowspan="2">&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td colspan="4">&nbsp;</td>
    </tr>
    <tr class="col-one"><td colspan="5"></td></tr>
</table>

PS: Честно говоря, вообще не понял, как rowspan влияет на окрашивание...

2
  • Спасибо! Но ты не внимательно прочитал мой вопрос. 29 июн 2017 в 9:45
  • @СергейСавельев, перечитал. Тогда, если число строк динамическое, я бы оборачивал их в tbody. Если постоянное, то у nth-child можно задать формулу.
    – Qwertiy
    29 июн 2017 в 11:19
2

Сам справился с задачей!

Просто добавил в добавляемые строки за счёт js ещё одну строку tr с колонкой со стилем display: none и код получился примерно следующим:

<table>
    <tr><th>&nbsp;</th><th>&nbsp;</th><th>&nbsp;</th><th>&nbsp;</th><th>&nbsp;</th></tr>
    <tr><td rowspan="2" colspan="5">&nbsp;</td></tr>
    <tr><td style="display: none;" colspan="4">&nbsp;</td></tr>
    <tr>
        <td rowspan="2">&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td colspan="4">&nbsp;</td>
    </tr>
    <tr>
        <td rowspan="2">&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td colspan="4">&nbsp;</td>
    </tr>
    <tr>
        <td rowspan="2">&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td colspan="4">&nbsp;</td>
    </tr>
    <tr><td rowspan="2" colspan="5">&nbsp;</td></tr>
    <tr><td style="display: none;" colspan="4">&nbsp;</td></tr>
</table>

CSS же такой:

table tr:nth-child(4n+2){
    background: rgba(0,0,0,0.05);
}
table tr:nth-child(4n+3){
    background: rgba(0,0,0,0.05);
}

Всем спасибо!

0

Самое первое что приходит в голову - добавить к каждой второй строке класс, и уже к этому классу добавить,например background-color: red;

1

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.