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

Question

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

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

我很熟悉CSS伪类第一胎(http://www.w3schools.com/cssref/sel_firstchild.asp),我也熟悉CSS打印属性页,突破内(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

好吧，直接回答 \xe2\x80\x94 你不能按照你想要的那样做。

\n\n

编辑：哦，看起来我回答了一个更复杂的问题，例如“如何在每个打印页面上添加表格标题”，但是，无论如何解决方案的方式是相同的。希望没事。

\n\n

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

\n\n

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

\n\n

table {\n    page-break-inside: avoid;\n    page-break-after: auto;\n}\n\ntable + table thead {\n    display: none;\n}\n

\n\n

另外不要忘记设置 td 宽度，因为没有 thead 的表可能有不同的宽度。

\n\n

之后添加打印样式：

\n\n

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

\n\n

是的，页面上可能会出现重复的标题，但总比没有好。如果您为您的项目找到了足够多的行数，它将看起来符合您的需要

\n\n

2)例如，使用WKHTMLTOPDF准备专用的下载可打印页面版本。这样您就可以很好地捕捉分页符，并添加您需要的内容。此选项提供最大的输出灵活性，但需要一些时间来支持。

\n\n

3）用JS计算一切。打印你的页面并分析它 \xe2\x80\x94 向 js 添加一些常量（每页高度），并且，当有人尝试打印 \xe2\x80\x94 时计算分页符，找到最接近的元素并添加你需要的内容。

\n\n

希望您能得到答复。\n祝您有美好的一天。

\n