I've been having problems with automatically breaking tables with a <caption> element that follows each page. The problem is, that once a page break happens, I can't remove the top margin of the first div inside the table.

The structure looks something like this:

<table class="pdf-table">
  <caption style="prince-caption-page: first">
    <div class="breadcrumbs"><!-- stuff --></div>
  </caption>	
  <caption style="prince-caption-page: following">
    <div class="breadcrumbs"><!-- stuff --></div>
  </caption>

  <tr>
    <td>
      <div class="pdf-page-content">
        <div></div>
        <div></div>
        <div></div>
      </div>
    </td>
  </tr>
</table>

.breadcrumbs { margin-bottom: 30px; }
.pdf-page-content > div { margin-top: 30px; }
.pdf-page-content > div:first-child { margin-top: 0; }

On the first page there is 30px margin between breadcrumbs and the first child div. But when the table breaks the :first-child selector doesn't match as hoped and the margin becomes 60px.

I can't add margin bottom to <caption> since it's a table element and ignores margin. Making it a block element breaks the continuing caption functionality.

So far I've been unable to select the first element of each page to remove the top margin of the first div. A working solution would be to change the margin-top to margin-bottom but since my current project has been in the works for 3 months I'm hesitant to do big changes to the base styles as the publish date is close.

Does anyone know if there's another solution to this problem?

Edited 7 Mar 2016 by jiia

How about adding padding-bottom to the caption?

Unfortunately that won't do since padding behaves very differently from margins. I believe I've already tried all possible CSS solutions, at least the ones I could come up with. I was just wondering if there was some Prince feature that would allow me to do something like this:

@page .pdf-page-content > div:first-child {
  // applied for each page
}

Unfortunately not, elements can't be selected based on their location on the page.

I can totally see how such a thing would make page-layout an almost infinite task, but what about a quick hack using visibility which doesn't change layout?

.name {
    visible: hidden;
    prince-first-of-type-on-page-visibility: visible;
}

Or any other solution that would allow you to override the visibility of the first instance of a class.

I feel this is a really killer feature, e.g. in printing transcripts or logs of conversations or even forum posts -- you would want the name to be repeated at the top of the next page.

Edited 15 Sep 2022 by sfinktah