Как я могу увидеть цвет фона nth-child после разрыва страницы?

Question

Я создаю печатную страницу, и мне нужно избегать поломки таблицы.Вот почему новая страница создается, если таблица ломается.Однако после разрыва страницы я не вижу цвета фона nth-child.

Избегать разбиения таблицы:

table {
     page-break-inside: avoid;
     break-inside: avoid;
}

И для n-го ребенка я попробовал это:

tbody tr:nth-child(odd) {
    background: rgb(235,237,237);
}

После разрыва страницы я ожидал увидеть цвета фона, но каким-то образомне вижу их.

Answer 1

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

@media print{
    body{
        -webkit-print-color-adjust: exact;
    }
}

Я повторил вашу проблему, и после применения этой настройки она исправленаэто для меня, так что я надеюсь, что это поможет.Также имейте в виду, что если для цвета фона установлено любое значение <td>, оно будет скрывать <tr> цвет фона.

РЕДАКТИРОВАТЬ Добавление z-index:-1 и position: relative квторая страница исправила проблему.

<page class="second-page">

.second-page{
    position: relative;
    z-index: -1;
    }