Page-break-inside for table does not work in Chrome 50
<p>I've seen this question all around, but nothing worked for me. Most of the topics are quite old, so I guess it has to do with the Chrome version. (Chrome 50)</p>

<p>I have a simple table</p>

<pre><code>&lt;table&gt;
  &lt;tr&gt;&lt;td&gt;Text&lt;/td&gt;&lt;/tr&gt;
  ...
  &lt;tr&gt;&lt;td&gt;Text&lt;/td&gt;&lt;/tr&gt;
&lt;/table&gt;
</code></pre>

<p>As suggested, I tried adding</p>

<pre><code>table {
  position:relative;
  page-break-inside: auto;
}
</code></pre>

<p>and</p>

<pre><code>tr {
  page-break-inside: avoid;
  page-break-after: auto;
}
</code></pre>

<p>See this <a href="https://jsfiddle.net/67uma9ea/" rel="nofollow noreferrer">JSFiddle</a>.</p>

<p>The print page does not look as I'd like it to, the page breaks inside a row.</p>

<p>Also, as suggested <a href="https://stackoverflow.com/questions/18860923/page-break-inside-property-is-not-working-in-chrome">here</a> I tried setting</p>

<pre><code> table {
   page-break-inside: avoid;
 }
</code></pre>

<p>But this did not work as well.
This is how it looks<a href="https://i.stack.imgur.com/PTeFP.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/PTeFP.png" alt="enter image description here"></a>
I'd want to find a way such that the page break wouldn't 'cut' a row.</p>