Trying to bend page breaks to my will

In short: I have an invoice in HTML. The document consists of a header, a table of invoice lines, a totals area, and a payment instruction area.

When the invoice contains too many invoice lines for it to be on one page, I want the invoice to do a page break in the invoice line table.

And it does just that when I put in many lines, so that's good. But if I put in just the right amount of lines, the page break is between the table and the totals, which I do not want. In this case I want the page break to be in the table as well.

Basically the only place I want a page break is in the table.

I tried something like this:

 * {
            page-break-before: avoid;
            page-break-after: avoid;
            page-break-inside: avoid;
        }

        table {
            page-break-before: avoid;
            page-break-after: avoid;
            page-break-inside: auto;
        }

But then the page break happens before the table.

Edited 3 Nov 2014 by rohde

Try applying it to "table, tbody, tr, td".

It still just pushes the table to the next page

Sorry, I misread. You will need to allow page breaks before/after rows, not prevent them.

Still the same. I have this:

 * {
            page-break-before: avoid;
            page-break-after: avoid;
            page-break-inside: avoid;
        }
           tbody, tr, td {
            page-break-before: auto;
            page-break-after: auto;
            page-break-inside: auto;
        }

Hmm, that will still apply "page-break-inside: avoid" to table elements, and "page-break-after: avoid" to the element *before* tables, which might cause similar issues.

What would you then suggest to only have page breaks in the table?

It may be difficult to arrange. Can you attach a sample document here that we can tweak? That may be easier than starting with a fresh document, which may not match your situation.

I have attached an HTML doc and the PDF from Prince.

1. test-invoice.html‎ 8.7 kB ‎
   HTML invoice document
2. test-invoice.pdf‎ 48.3 kB ‎
   PDF of invoice from Prince

Sorry, the first HTML file was missing som CSS. I have added it to the attached file.

1. test-invoice.html‎ 15.6 kB ‎
   Updated HTML invoice

So, any luck with this? Any ideas?

I think it may be difficult to do this at the moment. Presumably you don't want the payment-terms div element to be left on the second page by itself. However, applying "page-break-before: avoid" to this will pull the total-container div to the second page as well. Applying "page-break-before: avoid" to the total-container div also, will pull the entire table over to the second page. I don't think there is a way to pull just one or two rows to the second page, at least not with page-break properties alone.

If the table rows are a consistent height, then you could put a forced page break every N rows, or just after the first N rows, to handle the two-page situation, which is probably the most common.

Thx for the input.
Do you think something like this will be possible at some point in the future?

Perhaps; anything can happen in the future.