Workaround for Chrome 53 printing table header twice on 2nd and later pages?
My temporary solution:
thead {
display: table-row-group;
}
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;
}
}
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