html - 分页后如何查看 nth-child 的背景颜色？

Question

我正在创建打印页面，我需要避免表格损坏。这就是为什么在表格损坏时创建新页面的原因。但是，分页后，我看不到第 n 个 child 的背景颜色。

避免表格损坏:

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

对于第 n 个 child ，我尝试了这个:

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;
    }