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

Question

我正在创建打印页面，我需要避免表格损坏。这就是为什么如果表断开则创建一个新页面的原因。但是，在分页符之后，我看不到nth-child的背景颜色。

避免打破表格：

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

第一个孩子，我尝试了这个：

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