title: Bullet proof solution for page break on table row (<tr>) for printing
body: <p>It's been days after days we are failing breaking tables as per our need. The solution works for Firefox, but never worked for my favorite browser Chrome in a better way. What we've tried so far is:</p>
  
  <p>We made a class <code>.page-break</code> and made necessary CSS for the different level holders:</p>
  
  <pre><code>@media print{
     /* applied to our table */
     #report-table {
       /*-webkit-region-break-inside: auto; //tried for Chrome */
       page-break-inside:auto
    }
  
    /* applied to all our &lt;tr&gt; */
    #report-table tbody tr,
    #report-table .behave-tbody .behave-tr{
       /*-webkit-region-break-inside: avoid; //tried for Chrome */
       page-break-inside:avoid;
       break-after: auto;
       page-break-after: auto;
    }
  
    /* page break specific class */
    .page-break{
       break-after: always;
       /*-webkit-region-break-after: always; //tried for Chrome */
       page-break-after: always;
    }
  }
  </code></pre>
  
  <h2>We've learned/found so far</h2>
  
  <ul>
  <li>Page break works with a block-level element like <code>&lt;h1&gt;</code> <code>&lt;p&gt;</code> etc.</li>
  <li>Page break works buggy in Google Chrome for Table CSS</li>
  </ul>
  
  <p>Keeping them in mind we proceeded in different ways:</p>
  
  <h3>Step #1: Trying the solution with <code>&lt;table&gt;</code> <code>&lt;tr&gt;</code></h3>
  
  <pre><code>    &lt;table id="report-table"&gt;
          &lt;thead&gt;
          &lt;tr&gt;
              &lt;th&gt;Head&lt;/th&gt;
          &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tbody&gt;
          &lt;tr&gt;
              &lt;td&gt;Body Content&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr class="page-break"&gt;
              &lt;td&gt;Body Content&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;Body Content&lt;/td&gt;
          &lt;/tr&gt;
          &lt;/tbody&gt;
      &lt;/table&gt;
  </code></pre>
  
  <p>But that didn't work in Google Chrome. Even though we've learnt that, <a href="https://stackoverflow.com/a/20939397/1743124"><code>&lt;tr&gt;</code> itself is a block-level element</a>.</p>
  
  <h3>Step #2: Making table absolutely <code>&lt;div&gt;</code> based</h3>
  
  <pre><code>&lt;style&gt;
  .behave-table{
      display: table;
      width: 100%;
      height: 100%;
      position: relative;
  }
  .behave-thead{
      display: table-header-group;
  }
  /* th */
  .behave-thead .behave-td{
      background-color: #ededed;
      font-weight: 700;
  }
  .behave-tbody{
      display: table-row-group;
  }
  .behave-tr{
      display: table-row;
  }
  .behave-td{
      display: table-cell;
      padding: 5px;
      vertical-align: top;
  }
  &lt;/style&gt;
  &lt;div id="report-table" class="behave-table"&gt;
     &lt;div class="behave-thead"&gt;
        &lt;div class="behave-tr"&gt;
           &lt;div class="behave-td"&gt;Head&lt;/div&gt;
        &lt;/div&gt; &lt;!-- /.behave-tr --&gt;
     &lt;/div&gt;&lt;!-- /.behave-thead --&gt;
     &lt;div class="behave-tbody"&gt;
        &lt;div class="behave-tr"&gt;
           &lt;div class="behave-td"&gt;Body Content&lt;/div&gt;
        &lt;/div&gt; &lt;!-- /.behave-tr --&gt;
        &lt;div class="behave-tr page-break"&gt;
           &lt;div class="behave-td"&gt;Body Content&lt;/div&gt;
        &lt;/div&gt; &lt;!-- /.behave-tr --&gt;
        &lt;div class="behave-tr"&gt;
           &lt;div class="behave-td"&gt;Body Content&lt;/div&gt;
        &lt;/div&gt; &lt;!-- /.behave-tr --&gt;
     &lt;/div&gt; &lt;!-- /.behave-tbody --&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>But that didn't work in Google Chrome.</p>
  
  <h3>Step #3: Entering Block Level element inside table cell</h3>
  
  <p>Being instructed by <a href="https://stackoverflow.com/a/20939397/1743124">the SO thread</a> we've tried a block level element inside a blank table cell like below:</p>
  
  <pre><code>&lt;tr&gt;&lt;td&gt;Body Content&lt;/td&gt;&lt;/tr&gt;
  &lt;tr style="page-break-after: always"&gt;&lt;td&gt;&lt;h1&gt;Next Section&lt;/h1&gt;&lt;/td&gt;&lt;/tr&gt;
  &lt;tr&gt;&lt;td&gt;Body Content&lt;/td&gt;&lt;/tr&gt;
  </code></pre>
  
  <p>It works partially, for the first page only. We tried hiding the awkward Text block with Bootstrap <code>.sr-only</code> class but with that it din't work at all. We tried replacing the "Next Section" with <code>&amp;nbsp;</code> - it din't work too.</p>
  
  <h3>Step #4: Placing a <code>&lt;div&gt;</code> to break using known Block-level elem</h3>
  
  <pre><code>&lt;tr&gt;&lt;td&gt;Body Content&lt;/td&gt;&lt;/tr&gt;
  &lt;div class="page-break"&gt;&lt;/div&gt;
  &lt;tr&gt;&lt;td&gt;Body Content&lt;/td&gt;&lt;/tr&gt;
  </code></pre>
  
  <p>But you know it won't work, because <code>&lt;div&gt;</code> inside a table only work inside a table cell:</p>
  
  <blockquote>
    <p><em>What you need to do is make sure the div is inside an actual table cell, a td or th element</em><br>- <a href="https://css-tricks.com/using-divs-inside-tables/" rel="noreferrer">Chris Coyier</a></p>
  </blockquote>
  
  <h2>Aftermath</h2>
  
  <p>We <strong>failed</strong> our table to break nicely in Google Chrome. :(</p>
  
  <p><a href="https://i.stack.imgur.com/WBbS5.png" rel="noreferrer"><img src="https://i.stack.imgur.com/WBbS5.png" alt="Table Row page break isn&#39;t working in Google Chrome"></a></p>