分页后第一个 child 的 CSS 选择器

Question

在出现分页符后，如何设置第一个子元素的样式？

我面临的最终情况是，我想以不同方式设置表格第一行的样式，并且在打印表格时跨越多个页面。我成功地使用 :first-child 来设置第一行的样式。我还成功地避免了行内的分页符。不过，我不知道如何设置表格第二页第一行的样式。

我熟悉 css 伪类 first-child ( http://www.w3schools.com/cssref/sel_firstchild.asp )，我也熟悉 css 打印属性 page-break-inside ( http://www.w3schools.com/cssref/pr_print_pagebi.asp )。我无法让他们很好地一起玩？

编辑:添加代码示例

HTML:
<table>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
</table>

CSS:
table tr:first-child td { border-top: solid red 2px; }
table tr { page-break-inside: avoid }

Answer 1

好吧，直接回答——你不能随心所欲地做到这一点。

编辑: 哦，看起来我回答了一个更复杂的问题，比如“如何在每个打印页面上添加表头”，但是，无论如何解决方法是一样的。希望没事。

但是有几个技巧可以做你想做的事。

1) 将表格分成几个部分，为每个部分添加 thead 部分并删除边距，这样它看起来就像一个表格。在 css 中添加如下内容:

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

table + table thead {
    display: none;
}

也不要忘记设置 td 宽度，因为没有 thead 的表格可以有不同的宽度。

之后添加打印样式:

@media print {
    table + table thead {
        display: table-column-group;
    }
}

是的，页面上有可能出现重复的标题，但总比没有好。如果您为您的元素找到合适的行数，它将看起来像您需要的那样

2) 使用 WKHTMLTOPDF 准备专门下载的可打印页面版本， 例如。所以你可以很好地捕捉分页符，并添加你需要的东西。此选项提供最大的输出灵 active ，但需要一些时间来支持。

3) 用JS计算一切。打印您的页面并对其进行分析 — 向 js 添加一些常量(每页高度)，并且当有人尝试打印时 — 计算分页符，找到最接近的元素并添加您需要的内容。

希望你能得到答案。祝你有美好的一天。