title: Page break only between tbody when printing from Chrome
body: <p>I have a <code>&lt;table&gt;</code> of data where consecutive rows are conceptually related and need to stay together. I've group each pair of rows in a <code>&lt;tbody&gt;</code> tag. When it comes time to print the table, I want to make sure that page breaks only happen between <code>&lt;tbody&gt;</code> tags.</p>
  
  <p>I've tried some variations of <code>page-break-inside: avoid</code> and <code>page-break-after: auto</code>, but can't seem to get it to work in Chrome 42 (see screenshot below)</p>
  
  <p><a href="https://i.stack.imgur.com/qc29C.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/qc29C.png" alt="Conceptual group of rows split across two pages... what I don&#39;t want"></a></p>
  
  <p>However, it does seems to work as expected in Firefox 40 and IE 11 though. It looks like <code>page-break-*</code> might only apply to block level elements. Is there a good way to accomplish this in html/css?</p>
  
  <p>Example code:</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;style&gt;
          table {
              width: 70%;
              border-collapse: collapse;
          }
          thead {
              display: table-header-group;
              text-align: left;
              border-bottom: 2px solid #000;
          }
          tbody {
              page-break-inside: avoid;
              border-bottom: 1px solid #ccc;
          }
      &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;table&gt;
          &lt;thead&gt;
              &lt;tr&gt;
                  &lt;th&gt;Project #&lt;/th&gt;
                  &lt;th&gt;Owner&lt;/th&gt;
                  &lt;th&gt;% Complete&lt;/th&gt;
              &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tbody&gt;
              &lt;tr&gt;
                  &lt;td&gt;HR-123&lt;/td&gt;
                  &lt;td&gt;Arther Dent&lt;/td&gt;
                  &lt;td&gt;42%&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td colspan='3'&gt;Description: Find travel guide to get me back to earth.&lt;/td&gt;
              &lt;/tr&gt;
          &lt;/tbody&gt;
          &lt;tbody&gt;
              &lt;tr&gt;
                  &lt;td&gt;RD-123&lt;/td&gt;
                  &lt;td&gt;Frodo Baggins&lt;/td&gt;
                  &lt;td&gt;9%&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td colspan='3'&gt;Description: Find a better way to get the ring to Mordor.&lt;/td&gt;
              &lt;/tr&gt;
          &lt;/tbody&gt;
          &lt;!-- repeat tbody sections as necessary to get onto the second page --&gt;
      &lt;/table&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Here's a <a href="https://jsfiddle.net/tkdkejfs/" rel="nofollow noreferrer">JSFiddle</a> that'll give you a bit of an idea of what I'm trying to accomplish.</p>
  
  <p><em>Edit:</em> I considering not using a table but didn't since (i) I want my columns to line up, and (ii) I really don't want to hard-code column widths to make sure they're all the same.</p>