Bullet proof solution for page break on table row (<tr>) for printing
<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>