分页后如何查看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;
    }