Menu
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 https://jsfiddle.net/jaydeedub/n3qhvtvx/25/ ):
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>
</body>
CSS:
@media print {
div.page1 {
page-break-after: always;
}
}
.table {
border-collapse: collapse;
margin: 16px;
}
.table>thead>tr>td,
.table>tbody>tr>td,
.table>tfoot>tr>td {
border: 1px solid black;
}
.button {
width: 6em;
height: 2em;
margin: 10px 0px;
}
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.
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.
Is there a more robust workaround that would be likely not to have side-effects across browsers?
662
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
1
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
