如何在分页媒体输出的连续页面上设置表格样式？

Question

我有一个像这样的 html 表：

<div class="report">
    <table>
        <thead>...</thead>
        <tfoot>...</tfoot>
        <tbody>
            <tr class="row-to-style">...</tr>
        </tbody>
        <tbody>...</tbody>
    </table>
</div>

请注意，上面的所有 tbody 的结构都相同。我想将第一个 tr.row-to-style 行的样式设置为与其他行不同。每个 tbody 都会有一个 tr.row-to-style 但我只想影响页面上的第一个这样的行。输出是分页媒体，特别是 PrinceXML 从 xhtml 源文件生成的 pdf 文件。这意味着我们可以使用高级的css选择器，不需要跨浏览器兼容性，并且不能使用javascript。

在输出的第一页上设置目标行的样式非常容易。我可以使用：

table tfoot + tbody tr.row-to-style {...}

另外，如果我知道一个页面可以容纳多少个 tbody，我可以这样做：

table tbody:nth-of-type(4n+1) tr.row-to-style {...}

但是如果我不知道一个页面可以容纳多少个 tbody，我如何才能定位第一个？

实际上，在输出时，每页都会重复 thead 和 tfoot 部分。这些表是专门为了利用这一点而设计的。我们允许在 tbody 之后进行分页。输出可能包含几页。

因此，输出在每个页面上都有一个伪标题和伪tfoot。但我看不出有什么方法可以使用它来标记页面上的第一个 tbody。有什么想法吗？谢谢...

Answer 1

似乎没有任何文档讨论基于 @page 创建的“页面框”定位 css 的可能性。所有内容都讨论了 @page 如何创建“页面框”，但没有讨论如何访问或指向该页面框以设置页面上子元素的样式。这些都是在黑暗中拍摄的，未经测试的，并且可能无效，但也许......

@page tbody:first-child tr.row-to-style { styles go here }

或者也许使用命名页面？比如：

@page nameOfPage {}
tbody:first-child tr.row-to-style {page: nameOfPage; other styles go here}

或者类似 @media 定义：

@page {
    tbody:first-child tr.row-to-style { styles go here}
}

或者也许（因为我假设内容是在每个页面上为 thead 和 tfoot 生成的，这应该理论上将 thead 放在每个页面的第一个 tbody 之前）：

thead + tbody tr.row-to-style { styles go here }

老实说，我不希望这些方法起作用，但你可以尝试一下。问题似乎是真正的 tfoot 仅在 source 的顶部定义一次，因此 css 选择器无法将生成的页面识别为出于样式目的而存在。