Styles applied on header are not applied in print view

Question

I want to print a table in chrome. The styles applied on table header are not being applied if a single row goes beyond the page and the header is repeated for it.

I have a very large value for the row and which made it go beyond a page and repeat the header in next page which doesn't have styles applied properly.

Reference image: here background color is not applied for the next page header

code url: https://drive.google.com/file/d/1iAKsBQ82J24r0TJaR9pMiFOtBNax7idq/view?usp=sharing

code:

<html>
<head>
<style>
table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td, th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}
th {
  border: 1px solid #dddddd;
  text-align: left;
  color: red;
}
thead{
 color: red;
  background-color: blue;
}
tr:nth-child(odd) {
  background-color: #dddddd;
}
@media print{
thead{
 color: red !important;
  background-color: blue !important;
}
}
</style>
</head>
<body>

<h2>HTML Table</h2>

<table>
  <thead>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </thead>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma
    </td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
  <tr>
    <td>Ernst Handel</td>
    <td>Roland Mendel</td>
    <td>Austria</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>Helen Bennett</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Laughing Bacchus Winecellars</td>
    <td>Yoshi Tannamuri</td>
    <td>Canada</td>
  </tr>
  <tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Giovanni Rovelli</td>
    <td>Italy</td>
  </tr>
</table>

</body>
</html>

the code is very big as it has a lot of test data. will it be fine — Sashi yadav, May 06 '19 at 07:38
@Saravana no it didn't work if the second row has more data that goes beyond a page the style is not applied on the header then. — Sashi yadav, May 06 '19 at 09:50
it feels like it is taking the background color of the 2nd row. and as the first row doesn't have any background color default header background color is applied. — Sashi yadav, May 06 '19 at 09:57
@Saravana i have updated the g drive url with the test data code where it doesn't work . can you please try with that and look into it — Sashi yadav, May 06 '19 at 10:03
Which background color not appearing print preview. You mean blue background? — Saravana, May 07 '19 at 02:05
So you saying the second page blue bg header not working. Its like a fixed header for all page? — Saravana, May 07 '19 at 04:38
@Saravana , yes if we add more data in the row which has predefined styles and it goes beyond one page then header styles are not applied as depicted in the picture shown in question — Sashi yadav, May 07 '19 at 06:20
@Saravana `thead` has a default behavior to repeat itself in print view if the table goes beyond one page. — Sashi yadav, May 07 '19 at 06:22
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/192938/discussion-between-saravana-and-sashi-yadav). — Saravana, May 07 '19 at 06:40

Saravana · Answer 1 · 2019-05-08T07:57:36.890

Yep, that's a Webkit/Chrome thing. It won't print the thead on each page. What you could do to achieve something like this is use page-break.

Page break does only work on block elements, so you should style your tr's accordingly.

tbody tr.head {
    page-break-before: always;
    page-break-inside: avoid;
}

Refer here.

table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
}

td,
th {
    border: 1px solid #dddddd;
    text-align: left;
    padding: 8px;
}

th {
    border: 1px solid #dddddd;
    text-align: left;
    color: red;
    background-color: blue !important;
}

thead {
    color: red;
    background-color: blue !important;
}


tr:nth-child(odd) {
    background-color: #dddddd;
}
tbody tr.head {
    page-break-before: always;
    page-break-inside: avoid;
}
@media screen {
    tbody .head {
        display: none;
    }
    
    thead {
        color: red !important;
        background-color: blue !important;
    }
}
@media print {
    body {
        -webkit-print-color-adjust: exact;
    }
}

<h2>HTML Table</h2>

<table>
  <thead>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </thead>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma
    </td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
  <tr>
    <td>Ernst Handel</td>
    <td>Roland Mendel</td>
    <td>Austria</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>Helen Bennett</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Laughing Bacchus Winecellars</td>
    <td>Yoshi Tannamuri</td>
    <td>Canada</td>
  </tr>
  <tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Giovanni Rovelli</td>
    <td>Italy</td>
  </tr>
</table>

from the image, it seems that there is no background color in the second row, `tr:nth-child(even) { background-color: #dddddd; }` add this and try the background color will not be taken — Sashi yadav, May 08 '19 at 07:17
@Sashiyadav I missed to remove the `}` from my css. Now the color working. check the updated one. — Saravana, May 08 '19 at 07:58
@Sashiyadav https://raw.githack.com/saravanasksp/tshirt/master/test.html — Saravana, May 09 '19 at 06:13
try having more data in the rows with a grey background. i.e (1st,3rd, etc) — Sashi yadav, May 09 '19 at 07:52

Styles applied on header are not applied in print view

1 Answers1