应用于页眉的样式不应用于打印视图答案

【问题标题】：Styles applied on header are not applied in print view应用于页眉的样式不应用于打印视图
【发布时间】：2019-09-23 19:41:17
【问题描述】：

我想用 chrome 打印一张表格。如果单行超出页面并为其重复表头，则不会应用应用于表头的样式。

我对该行有一个非常大的值，这使它超出了一个页面并在没有正确应用样式的下一页中重复标题。

参考图片： 这里的背景颜色不适用于下一页页眉

代码网址：https://drive.google.com/file/d/1iAKsBQ82J24r0TJaR9pMiFOtBNax7idq/view?usp=sharing

代码：

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

【问题讨论】：

请向我们展示您的代码
请编辑您的答案并将您的代码放在那里
代码很大，因为它有很多测试数据。会好吗
只是剪切测试数据
@Saravana 不，如果第二行有更多数据超出页面之外，则该样式未应用于页眉。

标签： html css

【解决方案1】：

是的，那是 Webkit/Chrome 的东西。它不会在每一页上打印thead。你可以做些什么来实现这样的事情是使用分页符。

分页符仅适用于块元素，因此您应该相应地设置 tr 的样式。

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

请参考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>

【讨论】：

从图片看，第二行好像没有背景色，tr:nth-child(even) { background-color: #dddddd; }加这个试试背景色不会被拍
@Sashiyadav 我错过了从我的css中删除}。现在颜色工作。检查更新的。
可以添加截图吗？
@Sashiyadav raw.githack.com/saravanasksp/tshirt/master/test.html
尝试在灰色背景的行中添加更多数据。即（第一、第三等）