我的网站的用户需要能够打印的第一个打印页面上的内容组成的网页，其次是第二页上的表格。一个精简的版本是（jsFiddle at 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 OS上的Chrome 52中按预期打印，但在Windows 7 Home上的Chrome 53和Chrome OS上的Chrome 53中，表格标题在第二页上打印两次：一次是单独的，没有上边距，一次是有上边距，然后是表的其余部分。它曾经在早期版本的Chrome中在Windows中正常打印，但我不知道那是不是Chrome 52（肯定是在最后几个版本中）。在Firefox中也可以按预期打印。
我找到了一个解决方法，那就是在真实的的'head'元素之前放一个空的'head'元素，但是这个解决方案非常笨拙，让我很不舒服。
有没有一个更健壮的解决方案，可能不会在浏览器之间产生副作用？
5条答案
按热度按时间km0tfn4u1#
我的临时解决方案：
字符串
qyswt5oh2#
我在Chrome反馈渠道上发布了同样的问题。我现在的解决方法是简单地删除tbody中标准表行的head元素。当然，它在语义上并不那么纯粹，但是你可以很简单地用css对它们进行重新设计。
表：
字符串
Scss：
型
rt4zxlrg3#
我是得到双标题的第二页在 chrome 打印时
添加以下CSS使其正确显示（一次）
字符串
来源：https://stackoverflow.com/a/50987624/175071
h9a6wy2h4#
这个方法对我很有效
字符串
31moq8wy5#
这应该可以解决问题：
字符串
当这条线从边界附近被切断时，就会发生这种情况。