title: How to avoid page break between <thead> and <tbody>
body: <p>I'm trying to make a printable document with some quite long tables. And sometimes page ends right between table headers and the data, which makes it harder to read. </p>
  
  <p><a href="https://i.imgur.com/FtOKMo2.png" rel="nofollow noreferrer">Example</a></p>
  
  <p>How could I prevent that?</p>
  
  <p>I've tried to use the following CSS but it didn't help.</p>
  
  <pre><code>@media print {
          h1, h2, h3, thead, thead&gt;tr {
              page-break-after: avoid;
              page-break-inside: avoid;
          }
  
          tbody {
              page-break-before: avoid;
          }
  
          /* I would also like to not have page breaks within first five rows */
          tbody:nth-child(-n+5) {    
              page-break-before: avoid;
          }
  }
  </code></pre>
  
  <p>Table structure:</p>
  
  <pre><code>&lt;table border="1" cellspacing="0" cellpadding="3"&gt;
      &lt;thead&gt;
      &lt;tr&gt;
          &lt;th rowspan="2"&gt;Metric&lt;/th&gt;
          &lt;th colspan="3"&gt;Type 1&lt;/th&gt;
          &lt;th colspan="3"&gt;Type 2&lt;th&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;th&gt;Initial&lt;/th&gt;
          &lt;th&gt;Final&lt;/th&gt;
          &lt;th&gt;Difference&lt;/th&gt;
          &lt;th&gt;Initial&lt;/th&gt;
          &lt;th&gt;Final&lt;/th&gt;
          &lt;th&gt;Difference&lt;/th&gt;
      &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
      &lt;tr&gt;
          &lt;td&gt;Dataset1&lt;/td&gt;
          &lt;td&gt;*DATA*&lt;/td&gt;
          ...
      &lt;/tr&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>