title: Enforcing Consistent Page Breaks in Different Browsers
body: <p>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. </p>
  
  <p>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.</p>
  
  <p>Simplified down significantly, the structure of my page is vaguely as follows:</p>
  
  <pre><code>&lt;div class="body-block"&gt;    
      &lt;div class="inner-block"&gt;
          &lt;div class="report-block"&gt;
              &lt;div class="report-entry"&gt;
                  &lt;table&gt;
                      &lt;tr&gt;
                          &lt;th&gt;Header&lt;/th&gt;
                      &lt;/tr&gt;
                      &lt;tr&gt;
                          &lt;td&gt;Row&lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;tr&gt;
                          &lt;td&gt;Row&lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;tr&gt;
                          &lt;td&gt;Row&lt;/td&gt;
                      &lt;/tr&gt;
                  &lt;/table&gt;
              &lt;/div&gt;
              &lt;div class="report-entry"&gt;
                  &lt;table&gt;
                      &lt;tr&gt;
                          &lt;th&gt;Header&lt;/th&gt;
                      &lt;/tr&gt;
                      &lt;tr&gt;
                          &lt;td&gt;Row&lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;tr&gt;
                          &lt;td&gt;Row&lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;tr&gt;
                          &lt;td&gt;Row&lt;/td&gt;
                      &lt;/tr&gt;
                  &lt;/table&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The (simplified) CSS for the page looks like this:</p>
  
  <pre><code>.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;
  }
  </code></pre>
  
  <p>However, browser compatibility is causing me no end of headaches:</p>
  
  <ul>
  <li>Firefox displays everything perfectly and prints out without issue. Unfortunately, Firefox is not allowed by company policy for standard machines.</li>
  <li>Chrome just completely ignores the page-break-inside and page-break-after properties, and inserts page breaks wherever it feels like it.</li>
  <li>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. </li>
  </ul>
  
  <p><a href="https://jsfiddle.net/wenxvwkq/2/" rel="nofollow">This</a> JSFiddle shows off the issue. A direct link to the printable version is available <a href="https://fiddle.jshell.net/wenxvwkq/2/show/light/" rel="nofollow">here</a>, but doesn't seem to work on IE for some reason.</p>
  
  <p>How can I get either Chrome or IE (11) to co-operate with me and handle page breaks properly?</p>