Page Break for Tables in PDFs

Self-Hosted | v5
1

Hello Everyone,

I’m trying to get a PDF Template to page break over different line items in a ‘product-table’. You can see the problem I am having below:

Screen Shot 2022-08-18 at 1.31.35 pm
Screen Shot 2022-08-18 at 1.31.35 pm1692×346 38 KB

As you can see the line item draws over/under the page counter and on Page 2 the Line Item Header doesn’t add enough padding at the top and gets cropped.

I’ve tried adding ‘page-break-before’, ‘page-break-after’ and ‘page-break-inside’ to a variety of table elements via CSS, this includes to the entire table as well as the table row and it makes no difference.

I’ve also tried adding an empty div to the ‘Header’ and ‘Footer’ Sections of the Invoice Design but it seems that the header/footer in these HTML Sections is only added at the start and end of a document, not to each page. If it were to each page I could just throw a div in there and it would act as a spacer and draw the table rows around it.

Is it possible to do this or will I need to split it into 2x Invoices so that the Line Items fit on one page? Any help or advice would be appreciated.

Thank you!

2

@brad

which design is this?

you may want to adjust the margin variable in the @page tag to set a upper and lower margin.

3

@david

Thanks David! This is super helpful.

My invoice template is based on the Elegant Design. I checked the CSS and the @page tag was using margin: -0.25cm !important;. I have changed this to have custom margins for the top, bottom, left and right and now the page break for the product table is working as expected.

I very much appreciate the help!