Question

我要在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>

Answer 1

是的，这是Webkit / Chrome的事情。它不会在每页上打印thead。您可以做的就是使用page-break。

分页符仅适用于块元素，因此您应该相应地设置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>

应用于标题的样式不会应用于打印视图

1 个答案: