CODEWITHSUNDEEP
htmlcssgoogle-chrome
TietjeDK
TietjeDK

Reputation: 1207

Chrome prints table headers twice

I am experiencing a strange bug on Google Chrome (Version 53.0.2785.143). When i try to print the content of a page it includes one of the table headers twice.

The table header is only supposed to be shown once at the bottom.

Image:

enter image description here

And in a different section the table header flows over the table rows.

enter image description here

I am using print media query in order to only print the content of my page:

@media print {
table { 
    page-break-inside:auto 
}
tr { 
    page-break-inside:avoid; page-break-after:auto 
}
body * {
visibility: hidden;
}
.no-padding-small{
    padding: 0!important;
}
.stage, .progress-indicator {
display: none;
}
 #header{
display: none;
 }
.fixed-menu{
display: none;
}
.printable * {
visibility: visible;

}
 textarea, input[type], table, td, th, tr{
page-break-inside: avoid;
 }
}

Any suggestions?

Upvotes: 3

Views: 1582

Answers (1)

TietjeDK
TietjeDK

Reputation: 1207

Found a solution:

thead {
display: table-row-group;

}

Thanks to this thread Workaround for Chrome 53 printing table header twice on 2nd and later pages?

Upvotes: 10

Related Questions