如何每页仅显示一次表格行？

Question

我试图显示表行的每个奇怪实例，但是有另一个表介入。

（简化的）结构是：

<div class="question03">
    <table class="trendgraph">
        <thead>
            <tr class="q3_pageheader">....</tr>
            <tr>...</tr>
        </thead>
        <tbody>...</tbody>
    </table>
    <table class="datatable">
        <thead>...</thead>
        <tbody>...</tbody>
    </table>
    <table class="trendgraph">...</table>
    <table class="datatable">...</table>
</div>

对于这个问题，我将一个 table.trendgraph 表和一个 table.datatable 的集合称为“表集”：

<!-- this is a set -->
<table class="trendgraph">...</table>
<table class="datatable">...</table>

其中两个集合将适合单个页面。整个部分仅由封闭的

组成。加1到6套。

输出实际上是分页媒体：通过 PrinceXML 的 pdf，因此不需要跨浏览器兼容性。

挑战是：我只想在 table.trendgraph 表中每页第一次显示 tr.q3_pageheader 一次。该行每页将出现两次。

我的 css 首先关闭这些行：

div.question03 > table.trendgraph > thead > tr.q3_pageheader {
    display: none;
}

然后我一直在尝试各种方法来重新打开所需的行：

div.question03 > table.trendgraph:nth-child(odd) > thead > tr.q3_pageheader {
    display: table-row;
}

我可以通过设置 nth-child(1) 来显示第一个 tr.q3_pageheader （仅）。奇怪的是，tr.q3_pageheader 行都没有显示 nth-child(2) 或 nth-child(even)。所有 tr.q3_pageheader 行都显示为 nth-child(odd)。

请注意，当我从 html 中删除 table.datatable 时，所有第 n 个子级设置都会按预期工作。

显然我可以在这里做一些变通，例如在“页面”周围设置一个 div，或者为 tr.q3_pageheader 的第一个实例设置一个类。这将是输出各种数量的“表集”的系统的一部分。如果可能的话，我想仅在 html 或 css 中解决问题，而不需要在后端做出额外的决策。

任何帮助或指示将不胜感激。谢谢！

Answer 1

回答我自己的问题：

div.question03 tr.q3_pageheader {
    display: none;
}

div.question03 table:nth-child(4n+1) tr.q3_pageheader {
    display: table-row;
}

我已经确认这在 PrinceXML 和 webkit 中都有效。在每页有一定数量的表格的任何情况下，类似的方法都会起作用。