title: Workaround for Chrome 53 printing table header twice on 2nd and later pages?
body: <p>Users of my website need to be able to print web pages consisting of content on the first printed page followed by a table on the second page.  A stripped down version is (jsFiddle at <a href="https://jsfiddle.net/jaydeedub/n3qhvtvx/25/">https://jsfiddle.net/jaydeedub/n3qhvtvx/25/</a> ):</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;body&gt;
    &lt;button class="button" onclick="window.print()"&gt;Print Me&lt;/button&gt;
    &lt;div class="page1"&gt;
      This is the page 1 content. Blah, blah, blah.
    &lt;/div&gt;
    &lt;table class="table"&gt;
      &lt;thead&gt;
        &lt;tr&gt;
          &lt;td&gt;Page 2 table header prints twice&lt;/td&gt;
        &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
        &lt;tr&gt;
          &lt;td&gt;Page 2 table body&lt;/td&gt;
        &lt;/tr&gt;
      &lt;/tbody&gt;
      &lt;tfoot&gt;
        &lt;tr&gt;
          &lt;td&gt;Page 2 table footer&lt;/td&gt;
        &lt;/tr&gt;
      &lt;/tfoot&gt;
    &lt;/table&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>@media print {
    div.page1 {
      page-break-after: always;
    }
  }
  
  .table {
    border-collapse: collapse;
    margin: 16px;
  }
  
  .table&gt;thead&gt;tr&gt;td,
  .table&gt;tbody&gt;tr&gt;td,
  .table&gt;tfoot&gt;tr&gt;td {
    border: 1px solid black;
  }
  
  .button {
    width: 6em;
    height: 2em;
    margin: 10px 0px;
  }
  </code></pre>
  
  <p>This prints as expected in Chrome 52 on Chrome OS, but in Chrome 53 on Windows 7 Home and Chrome 53 on Chrome OS, the table header prints twice on the second page: once by itself without the top margin, and once with the top margin, followed by the rest of the table.  It used to print normally in Windows in an earlier version of Chrome, but I do not know if that was Chrome 52 (definitely within the last few versions).  It also prints as expected in Firefox.</p>
  
  <p>I found one workaround, which is to put an empty 'thead' element before the real 'thead' element, but this solution is very kludgy and makes me uncomfortable.</p>
  
  <p>Is there a more robust workaround that would be likely not to have side-effects across browsers?</p>