How to display a table row once per page only?

Question

Hello, I am trying to display every odd instance of a table row, however there is another table intervening.

The (simplified) structure is:

<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>

For this question, I am calling a 'table set' the set of one table.trendgraph table and one table.datatable:

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

Two of these sets will fit on a single page. The entire section consists only of the enclosing <div> plus 1 to 6 sets.

The output is actually paged media: pdf via PrinceXML, thus, cross-browser compatibility isn't needed.

The challenge is: I want to show tr.q3_pageheader in the table.trendgraph table only once per page, the first time it appears. This row will occur twice per page.

My css first turns these rows off:

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

Then I have been trying various things to turn the desired row back on:

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

I can get the first tr.q3_pageheader (only) to display by setting nth-child(1). Curiously, none of the tr.q3_pageheader rows display with nth-child(2) or nth-child(even). All of the tr.q3_pageheader rows display with nth-child(odd).

Note that when I remove table.datatable from the html, then all the nth-child settings work as expected.

I could obviously do work arounds here, such as setting a div around a 'page', or setting a class for the first instance of tr.q3_pageheader. This will be part of a system that will output various numbers of 'table sets'. If possible I would like to solve the issue in html or css only without requiring extra decision making in the backend.

Any help or pointers would be appreciated. Thanks!

Answer 1

Answering my own question with this:

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

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

I've confirmed this works both in PrinceXML and webkit. Something similar would work in any case where you had a set number of tables per page.