Html/Css: Empty Page + Only Header Page When Printing Table

HTML/CSS: empty page + only header page when printing table

The page-break-avoid applied to the table tells the formatting engine to not break the page inside the table. You should note that most formatters do not "go backward" and attempt to do things again, they are "go forward" engines.

So, you have page-break-avoid set on the whole table. That table is about 2.5 physical pages long.

First, the formatter tries to fit it in the current page. Of course it can't as it is longer than a page. So it throws that blank page and tries again. And again, of course it can't as it does not fit on that page.

So it creates a new blank page, places the header and starts to put down rows. BUT you have another rule -- page-break-after="avoid" on rows. So it can't break the page after the row so it starts putting rows in memory and ... poof. Of course they do not fit on the page as there are more rows than the page is long.

So it gives up and then places your table on that next page and breaks that condition.

You have created a hugely over-contrained set of rules.

It's not clear what you actually want as you cannot say -- I do not want a table to break inside of it and I want all the rows kept together (those are both of the rules you stated) AND then give it a table that is 2.5 pages long.

I would also note that this is a bit scary:

p { orphans: 5; widows: 5; page-break-after: avoid; page-break-before: avoid; }

What that means is keep at least 10 lines together in any p tag, never break a page before it and never after it. So literally you are saying that if you had 10 p tags in a row, none with more than 10 lines (5 orphans and 5 widows) you will hit the same condition again. It could not break inside it, before it or after it.

Now, your comment below:

But this is a must for us (my company). The table header must be visible in all the pages.

You must mean on all pages on which the table is placed, not all the pages. And the constraints to keep a table all together (page-break-inside="avoid" on table) or to keep all the rows in a table together (page-break-after="avoid" on row) have nothing to do with that. Table headers will appear on each page the table is on. As long as they are in a table-header.

Removing all those constraints -- you see the table headers are fine and no blank pages. So remove:

page-break-inside="avoid" on table
page-break-after="avoid" on tr
(and I would never have that set of rules on p)

Sample Image

how to avoid extra blank page at end while printing?

You could maybe add

.print:last-child {
     page-break-after: auto;
}

so the last print element will not get the extra page break.

Do note that the :last-child selector is not supported in IE8, if you're targetting that wretch of a browser.

How to deal with page breaks when printing a large HTML table

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Test</title>
<style type="text/css">
    table { page-break-inside:auto }
    tr    { page-break-inside:avoid; page-break-after:auto }
    thead { display:table-header-group }
    tfoot { display:table-footer-group }
</style>
</head>
<body>
    <table>
        <thead>
            <tr><th>heading</th></tr>
        </thead>
        <tfoot>
            <tr><td>notes</td></tr>
        </tfoot>
        <tbody>
        <tr>
            <td>x</td>
        </tr>
        <tr>
            <td>x</td>
        </tr>
        <!-- 500 more rows -->
        <tr>
            <td>x</td>
        </tr>
    </tbody>
    </table>
</body>
</html>

Print table header in CSS only on second page when table is too big

I found this article and solved my issues:

https://medium.com/@Idan_Co/the-ultimate-print-html-template-with-header-footer-568f415f6d2a

Html/Css: Empty Page + Only Header Page When Printing Table