How to style tables on successive pages of a paged media output?

Question

I have an html table like this:

<div class="report">
    <table>
        <thead>...</thead>
        <tfoot>...</tfoot>
        <tbody>
            <tr class="row-to-style">...</tr>
        </tbody>
        <tbody>...</tbody>
    </table>
</div>

Note that all tbody's above are identically structured. I want to style the very first tr.row-to-style row differently from the others. Each tbody will have a tr.row-to-style but I want to only affect the first such row on a page. The output is paged media, specifically PrinceXML produced pdf files from xhtml source files. This means we can use advanced css selectors, cross-browser compatibility is not required, and javascript cannot be used.

It's easy enough to style the target row on the first page of output. I can use:

table tfoot + tbody tr.row-to-style {...}

Also, if I know how many tbody's will fit on a page, I can do something like:

table tbody:nth-of-type(4n+1) tr.row-to-style {...}

But if I don't know the number of tbody's that will fit on a page, how can I target the first one?

On output, in effect, the thead and tfoot sections are repeated for each page. The tables were designed this way specifically to take advantage of this. We allow for page breaks after a tbody. The output may contain several pages.

Thus, the output has sort of a pseudo-thead and pseudo-tfoot on each page. But I see no way of using such to mark the first tbody on a page. Any ideas? Thanks...

Answer 1

There just doesn't seem to be any documentation that talks about the possibility of targeting css based off the "page box" that the @page creates. Everything talks about how the @page creates a "page box" but nothing about how to access or point to that page box for styling of child elements on a page. These are all shots in the dark, untested, and likely not valid, but maybe...

@page tbody:first-child tr.row-to-style { styles go here }

Or perhaps some use of named pages? Like:

@page nameOfPage {}
tbody:first-child tr.row-to-style {page: nameOfPage; other styles go here}

Or something like @media defining:

@page {
    tbody:first-child tr.row-to-style { styles go here}
}

Or maybe (since I assume the content is generated on each page for thead and tfoot, which should theoretically place thead before the first tbody of each page):

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

Honestly, I don't expect any of these to work, but you can give them a try. The problem seems to be that the real tfoot is only defined once at the top of the source and therefore the css selectors do not recognize the page generated one's as existing for styling purposes.