Table on 2nd page prints twice

HTML

<body>
  <button class="button" onclick="window.print()">Print Me</button>
  <div class="page1">
    This is the page 1 content. Blah, blah, blah.
  </div>
  <table class="table">
    <thead>
      <tr>
        <td>Page 2 table header prints twice</td>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Page 2 table body</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <td>Page 2 table footer</td>
      </tr>
    </tfoot>
  </table>
  <div>
    Table header prints twice on the second (and later) pages in Chrome 53 on Windows 7 Home and Chrome OS. Table header prints OK in Chrome 52 on Chrome OS.  Broke in Windows within the last couple months, but not sure which version of Chrome was last OK.
  </div>
</body>

CSS

@media print {
  div.page1 {
    page-break-after: always;
  }
  #table {
    display: block;
    font-size: 24pt;
  }
   header nav, footer {
  display: none;
  }
  thead {
  display: table-row-group;
  }
}

.table {
  border-collapse: collapse;
  margin: 16px;
}

.table>thead>tr>td,
.table>tbody>tr>td,
.table>tfoot>tr>td {
  border: 10px solid black;
}

.button {
  width: 6em;
  height: 2em;
  margin: 10px 0px;
}