title: Prevent page break between thead and tbody when printing
body: <p>I have some dynamic content, and when printing I found browsers will insert a page break between a tables <code>&lt;thead&gt;</code> and the following <code>&lt;tbody&gt;</code>, resulting in things like this screenshot depending on the preceding dynamic content.</p>
  <p>I want it to move the table/header to the next page in this case so I don't have a header by itself.</p>
  <p><code>break-after: avoid</code> looks like it should be the CSS rule for this, I tried it on combinations of the <code>thead</code>, the contained <code>tr</code>, and the <code>th</code>, but it doesn't seem to have any effect.</p>
  <p>Mostly tried on Chrome, I got similar results in Firefox, I would like this to work in all major browsers if possible.</p>
  <p>In many cases tables will fit the current page fine, so I don't want to start every table on a new page. They might also be longer than one entire page, and need to be able to break somewhere between rows.</p>
  <p><a href="https://i.stack.imgur.com/4nOFb.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/4nOFb.png" alt="Chrome print to PDF" /></a></p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>      table {
          border-collapse: collapse;
        }
        thead {
          break-after: avoid; /* No effect */
        }
        thead tr {
          break-after: avoid; /* No effect */
        }
        thead tr th {
          break-after: avoid; /* No effect */
        }
        td, th {
          border: 1px solid #A0A0A0;
          padding: 0.2em 0.5em;
        }
        td {
          vertical-align: top;
        }
        td p:first-child { margin-top: 0; }
        td p:last-child { margin-bottom: 0; }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div style="border: 2px solid red; width: 200px; height: 240mm"&gt;
    &lt;p&gt;Consume Space&lt;/p&gt;
    &lt;p&gt;Required height for effect is browser dependent&lt;/p&gt;
    &lt;button onclick="window.print()"&gt;Print&lt;/button&gt;
   &lt;/div&gt;
  &lt;table&gt;
    &lt;thead&gt;&lt;tr&gt;&lt;th&gt;&lt;div&gt;Name&lt;/div&gt;&lt;/th&gt;&lt;th&gt;Col 2&lt;/th&gt;&lt;th&gt;Col 3&lt;/th&gt;&lt;th&gt;Col 4&lt;/th&gt;&lt;/tr&gt;&lt;/thead&gt;
    &lt;tbody&gt;
      &lt;tr&gt;&lt;td&gt;A&lt;/td&gt;&lt;td&gt;X&lt;/td&gt;&lt;td&gt;Y&lt;/td&gt;&lt;td&gt;&lt;p&gt;Z&lt;/p&gt;&lt;p&gt;Z&lt;/p&gt;&lt;p&gt;Z&lt;/p&gt;&lt;p&gt;Z&lt;/p&gt;&lt;/td&gt;&lt;/tr&gt;
      &lt;tr&gt;&lt;td&gt;B&lt;/td&gt;&lt;td&gt;X&lt;/td&gt;&lt;td&gt;Y&lt;/td&gt;&lt;td&gt;&lt;p&gt;Z&lt;/p&gt;&lt;p&gt;Z&lt;/p&gt;&lt;p&gt;Z&lt;/p&gt;&lt;p&gt;Z&lt;/p&gt;&lt;/td&gt;&lt;/tr&gt;
      &lt;tr&gt;&lt;td&gt;C&lt;/td&gt;&lt;td&gt;X&lt;/td&gt;&lt;td&gt;Y&lt;/td&gt;&lt;td&gt;&lt;p&gt;Z&lt;/p&gt;&lt;p&gt;Z&lt;/p&gt;&lt;p&gt;Z&lt;/p&gt;&lt;p&gt;Z&lt;/p&gt;&lt;/td&gt;&lt;/tr&gt;
      &lt;tr&gt;&lt;td&gt;D&lt;/td&gt;&lt;td&gt;X&lt;/td&gt;&lt;td&gt;Y&lt;/td&gt;&lt;td&gt;&lt;p&gt;Z&lt;/p&gt;&lt;p&gt;Z&lt;/p&gt;&lt;p&gt;Z&lt;/p&gt;&lt;p&gt;Z&lt;/p&gt;&lt;/td&gt;&lt;/tr&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>