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

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 之后进行分页。输出可能包含多个页面。

因此，输出在每个页面上都有一种伪标题和伪脚。但我看不出有什么办法可以用它来标记页面上的第一个 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 选择器无法识别页面生成的页面以用于样式目的.