Enforcing Consistent Page Breaks in Different Browsers

Question

I'm currently working on producing some online reports for a project, which need to be able to be printed out in a consistent format. The content of the report is generated with PHP and works fine within the actual browser. Unfortunately and infuriatingly, once I try to print, all bets are off.

I've organized the content into a series of tables, and I'm attempting to use the page-break-inside and page-break-after CSS attributes to control the printed appearance of the report. The intention is that report items should only be broken across pages if their content is too long to fit on a single page.

Simplified down significantly, the structure of my page is vaguely as follows:

<div class="body-block">    
    <div class="inner-block">
        <div class="report-block">
            <div class="report-entry">
                <table>
                    <tr>
                        <th>Header</th>
                    </tr>
                    <tr>
                        <td>Row</td>
                    </tr>
                    <tr>
                        <td>Row</td>
                    </tr>
                    <tr>
                        <td>Row</td>
                    </tr>
                </table>
            </div>
            <div class="report-entry">
                <table>
                    <tr>
                        <th>Header</th>
                    </tr>
                    <tr>
                        <td>Row</td>
                    </tr>
                    <tr>
                        <td>Row</td>
                    </tr>
                    <tr>
                        <td>Row</td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
</div>

The (simplified) CSS for the page looks like this:

.body-block {
    display: block;
    min-width: 700px;
    min-height: 100%;
    margin: 0 auto;
}

.inner-block {
    width: 700px;
    min-height: 100px;
    margin: 18px 0 10px 0;
    float: left;
}

.report-block {
    margin-bottom: 50px;
    page-break-after: always;
}

.report-entry table {
    width: 100%;
    border-collapse: collapse;
    border-bottom: 2px solid #333;
    page-break-after: auto;
    page-break-inside: avoid;
}

.report-entry td, .report-entry th {
    page-break-inside: avoid;
    page-break-after: avoid;
}

However, browser compatibility is causing me no end of headaches:

Firefox displays everything perfectly and prints out without issue. Unfortunately, Firefox is not allowed by company policy for standard machines.
Chrome just completely ignores the page-break-inside and page-break-after properties, and inserts page breaks wherever it feels like it.
IE 11, the company standard browser, does recognize the page-break-inside tag but messes up completely if the content of a table/row/cell spans for more than one page (which happens when people try to copy-paste in entire emails). Whenever it runs across one, it will throw in an extra blank page before the table.

This JSFiddle shows off the issue. A direct link to the printable version is available here, but doesn't seem to work on IE for some reason.

How can I get either Chrome or IE (11) to co-operate with me and handle page breaks properly?

score 1 · Answer 1 · edited May 23 '17 at 12:03

1

To fix the browser differences you should user reser.css or normalize.css

Refer CSS reset - What exactly does it do?

Refer Firefox/IE Padding/Margin Fix

Refer How do I fix CSS padding issues between Firefox & Chrome?

try this fix

<meta http-equiv="X-UA-Compatible" content="IE=8" />
<style type="text/css">
tr {
   page-break-inside: initial;
   page-break-after: always;
   page-break-inside: auto;
}
td {
   page-break-inside: initial;
   page-break-after: always;
   page-break-inside: auto;
}
</style>

try all possible values for page-break-inside: auto|avoid|initial|inherit;

Also try <br> and ::after or ::before

edited May 23 '17 at 12:03

Community

1
1

answered Jun 22 '15 at 18:11

Dickens A S

3,824
2
22
45

1

Unfortunately, while those look like good references for general browser differences, none of those make any difference in this case. – se-name-here Jun 22 '15 at 18:20
In response to your edit, I tried playing around with the various combinations of page-break-inside values as well as adding the meta tag, but neither of those fixed the issue either. – se-name-here Jun 22 '15 at 18:42
Try page-break-after combination it seems it is an issue in IE 11 – Dickens A S Jun 22 '15 at 18:48
1

I don't want to insert a page break after each row/cell, though; I want to limit the number of in-table page breaks as much as I can. – se-name-here Jun 22 '15 at 18:50

Enforcing Consistent Page Breaks in Different Browsers

1 Answers1