Вопросы Теги

Многострочные HTML-таблицы (rowspan) — как правильно зебрировать?

У меня есть следующая таблица, в которой первая строка содержит 2 подстроки, а вторая - 3 подстроки.

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

 tr:nth-child(odd)  {background-color: #eee;}
 tr:nth-child(even) {background-color: #fff;}

Faulty zebra with nth-child css

Так есть ли способ зебры правильно раскрасить такую ​​таблицу?

Конечно, моя реальная проблема связана с гораздо большим количеством строк, с гораздо более переменным числом подстрок.

<head>
    <style>
        tr:nth-child(odd)  {background-color: #eee;}
        tr:nth-child(even) {background-color: #fff;}
    </style>
<head>
<body>
    <table border="1">
        <tr>
            <td rowspan="2">
                Big1
            </td>
            <td>
                small1
            </td>
        </tr>
        <tr>
            <td>
                small2
            </td>
        </tr>
        <tr>
            <td rowspan="3">
                Big2
            </td>
            <td>
                small1
            </td>
        </tr>
        <tr>
            <td>
                small2
            </td>
        </tr>
        <tr>
            <td>
                small3
            </td>
        </tr>
    </table>
</body>
7
задан Brian Tompsett - 汤莱恩 2 January 2019 в 16:07
поделиться