title: Page break is not working with the tbody issue
body: <p>I am generating a print report using <code>table</code> in <a href="/questions/tagged/twitter-bootstrap" class="post-tag" title="show questions tagged &#39;twitter-bootstrap&#39;" rel="tag">twitter-bootstrap</a> layout. The page has multiple <code>tbody</code> inside a <code>table</code>; While Printing the page it requires a <code>page-break-after</code> each <code>tbody</code></p>
  <p>To do so, I have applied <a href="/questions/tagged/print-css" class="post-tag" title="show questions tagged &#39;print-css&#39;" rel="tag">print-css</a></p>
  <pre><code>@media print {
      tbody{
          page-break-after: auto;
          page-break-inside: avoid;
          border: none !important;
          margin-bottom: 20px !important;
      }
  }
  </code></pre>
  <h3>What is the issue?</h3>
  <ul>
  <li><p>while applying the style <code>page-break-after</code> to a <code>tbody</code> , page-break is not working <strong><a href="http://jsfiddle.net/DTcHh/3052/" rel="noreferrer">see here</a></strong></p>
  </li>
  <li><p>but when applying <code>display:block</code> to <code>tbody</code>, it gives desired result but the layout of table is being distorted after changing <code>tbody</code> <code>display:table-row-group</code> to <code>display:block</code> <strong><a href="http://jsfiddle.net/DTcHh/3051/" rel="noreferrer">See Here</a></strong></p>
  </li>
  </ul>
  <h3>I want to break the page after tbody using <code>page-break-after: auto;</code>.</h3>
  <h3>Scenario is given below</h3>
  <p><img src="https://i.stack.imgur.com/SzFPT.png" alt="table" /></p>