Question

我网站的用户需要能够打印包含第一页打印页面内容的网页，然后打印第二页上的表格。精简版是（jsFiddle 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;
}

这可以在Chrome操作系统的Chrome 52中按预期打印，但在Chrome操作系统的Windows 7 Home和Chrome 53上的Chrome 53中，表格标题在第二页上打印两次：一次没有上边距，一次显示上边距，其次是表格的其余部分。它曾经在Windows的早期版本中正常打印，但我不知道这是否是Chrome 52（绝对是在最后几个版本中）。它还可以在Firefox中按预期打印。

我找到了一个解决方法，就是把一个空的＆＃39; thead＆＃39;真实的元素之前的元素＆＃39;元素，但这个解决方案是非常kludgy，让我感到不舒服。

是否有更强大的解决方法可能不会在浏览器中产生副作用？

Answer 1

我的临时解决方案：

thead {
    display: table-row-group;
}

Answer 2

我向Chrome反馈渠道发布了同样的问题。我现在的解决方法是简单地删除tbody中标准表行的thead元素。它肯定不是语义上的纯粹，但你可以简单地用一点css来重新设置它们。

表：

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

Answer 3

打印时我在chrome的第二页上得到了双页眉

添加以下CSS使其正确显示（一次）

thead {
    display:table-header-group;
    break-inside: auto;
}

来源：https://stackoverflow.com/a/50987624/175071

Answer 4

此修复程序对我有用

thead {
  display: table-row-group;    
}

在第二页和后面的页面上，Chrome 53打印表标题的解决方法是两次？

4 个答案: