Ensuring consistent page breaks across browsers

I am currently working on generating online reports for a project to be printed in a consistent format. The content of the report is generated with PHP and works great in a real browser. Unfortunately and for no reason, when I try to print, all bets are disabled.

I have organized the content into a series of tables and I am trying to use pagination and pagination CSS attributes to control the printed appearance of a report. The goal is that report elements should only be paginated if their content is too long to fit on a single page.

Simplified greatly, my page structure vaguely looks like this:

<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 doesn't give me any headaches:

• Firefox renders and prints fine without issue. Unfortunately Firefox is not allowed by company policy for standard machines.
• Chrome just completely ignores the page breaks and page breaks properties and inserts page breaks wherever it is.
• IE 11, the company's standard browser, recognizes the page break tag, but it's a mess if the table / row / cell content spans more than one page (which happens when people try to copy-paste altogether via email). Whenever it goes through one, it will add an extra blank page in front of the table.

This JSFiddle demonstrates this issue. A direct link to the printable version is available here , but apparently doesn't work on IE.

How can I get Chrome or IE (11) to work with me and handle page breaks correctly?