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

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 选择器无法识别为样式目的而生成的页面。