1

我有一个这样的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。有任何想法吗？谢谢...

4

1 回答 1

0

似乎没有任何文档讨论基于@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}
}

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

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

老实说，我不希望这些中的任何一个起作用，但是您可以尝试一下。问题似乎是 real只在源代码tfoot的顶部定义一次，因此 css 选择器无法识别为样式目的而生成的页面。

于 2010-07-19T21:19:36.473 回答