Workaround for Chrome 53 printing table header twice on 2nd and later pages?

Question

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 (jsFid

Answer 1

My temporary solution:

thead {
    display: table-row-group;
}

Answer 2

I posted the same issue to the Chrome feedback channels. My workaround for now was to simply remove my thead elements for a standard table row within the tbody. It's certainly not as semantically pure, but you can pretty simply restyle them with a touch of css.

Table:

<table>
<tbody>
  <tr class="thead">
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
  </tr>
</tbody>
<tfoot>
   <tr>
     <td></td>
     <td></td>
   </tr>
</tfoot>
</table>

Scss:

tr.thead {
  td {
    font-weight:bold;
    border-bottom: solid 1px #333;
  }    
}

Answer 3

I was getting the double header on the second page in chrome when printing

Adding the following CSS made it appear properly (once)

thead {
    display:table-header-group;
    break-inside: auto;
}

Source: https://stackoverflow.com/a/50987624/175071

Answer 4

This fix worked for me

thead {
  display: table-row-group;    
}