LOOP for PDF printing

Repeat table headers on each page when printing a multi-page PDF.

Overview

The issue occurs because standard HTML table headers do not automatically repeat across pages during PDF generation.
Use CSS print styles with `display: table-header-group;` for the `` element and `display: table-row-group;` for the `` element to ensure headers appear on every page.

Answered
ChronoForms v6
ms msreyes 09 Nov, 2021
I do a DB read, capture it into a loop and use the TCPDF to output it into a PDF. That works.

But my report is several pages long... basically all in a HTML table. I am trying to figure out best way to have my table headings print on every page. I can sort of hack it by adding

@media print {
.pagebreak { page-break-before: always; }
}

then in the output <div class="pagebreak">

If I were to guess, 12 rows fits to a page in my case nicely. Any suggestions on how to get table headings onto every page during PDF printing?
Gr GreyHead 10 Nov, 2021
Hi msreyes,

I don't think that there is any simple way to repeat the headers in the ChronoForms action. Can you not add them after your pagebreak div?

Bob
ms msreyes 17 Nov, 2021
Answer
I figured it out. It all has to do with CSS tagging actually. The CSS is like this (important parts):
<style type="text/css" media="print">

thead {
padding: 10px;
text-align: left;
border: 1px solid grey;
background-color: #CCCCCC;
display: table-header-group;
}

tbody {
display: table-row-group;
}

</style>
Then my Table with the loop is like this:
<table>
<thead>
<tr>
<th>HEADING 1</th>
<th>HEADING 2</th>
<th>HEADING 3</th>
<th>HEADING 4</th>
</tr>
</thead>
<tbody>

{var:loop21}
</tbody>
</table>
This topic is locked and no more replies can be posted.