I’m currently styling for print in our application. We want repeating headers/footers on each page. After looking at pagedjs, and trying to milk something out of the barely implemented @page spec, I found the easiest way to get the repeating headers and footers was to just nest the whole structure in a table.

By default the contents of thead and tfoot get printed as the header and footer on each page.

<table>
  <thead>
   <tr>
     <th>This header will repeat on each page!</>
   </tr>
  </thead>
  <tbody>
    <tr>
     <td>All page content goes here</td>
    </tr>
  </tbody>
  <tfoot>
   <tr>
    <th>This footer gets printed on each page!</th>
  </tr>
  </tfoot>
</table>

However it seems when taking this approach all the methods for controlling page breaks within the content td don’t work.

Elements with break-inside: avoid will still break inside. Neither break-before: all or page-break-before: always force page breaks.

I think the only way to make this solution work would be to chop the content into tds, but that would send me back to the drawing board on the whole solution.

Has anyone faced this, if so how’d you get around this issue?