分页符后第一个孩子的CSS选择器

如何在分页发生后为第一个孩子设置样式？

我面临的最终情况是我想以不同的方式设置表格的第一行样式,并且当打印表格时跨越多个页面.我成功地使用了：first-child来设置第一行的样式.我也成功地避免了行内的分页符.但是我无法弄清楚如何在表格的第二页上设置第一行的样式.

我熟悉css伪类的第一个孩子(http://www.w3schools.com/cssref/sel_firstchild.asp),我也熟悉css print属性page-break-inside(http://www.w3schools.com/cssref/pr_print_pagebi.asp).我不能让他们一起玩得很好吗？

编辑：
添加代码示例

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

最佳答案

好吧,直接回答 – 你不能按照自己的意愿去做.

编辑：哦,看起来我回答了一个更复杂的问题,如“如何在每个打印页面上添加表格标题”,但是,无论如何解决方案是一样的.希望没关系.

但是有几个技巧可以做你想要的.

1)在几个部分中断表,将每个部分添加到每个部分并删除边距,因此它看起来只有一个表.添加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的专用下载的可打印版本的页面.因此,您可以很好地捕获分页符,并添加您需要的内容.此选项可提供最大的输出灵活性,但需要一些时间来提供支持.

3)用JS计算一切.打印页面并进行分析 – 向js(每页高度)添加一些常量,当有人尝试打印时 – 计算分页符,找到最接近的元素并添加所需内容.

希望你有答案.
祝你今天愉快.

相关文章