gpt4 book ai didi

google-chrome - Chrome 53 在第二页和以后的页面上两次打印表头的解决方法?

转载 作者:行者123 更新时间:2023-12-03 14:37:10 25 4
gpt4 key购买 nike

我的网站的用户需要能够打印由第一个打印页面上的内容和第二个页面上的表格组成的网页。精简版是(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 中按预期打印。

我找到了一种解决方法,即在真正的 'thead' 元素之前放置一个空的 'thead' 元素,但是这个解决方案非常笨拙,让我感到不舒服。

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

最佳答案

我的临时解决方案:

thead {
display: table-row-group;
}

关于google-chrome - Chrome 53 在第二页和以后的页面上两次打印表头的解决方法?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39516885/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com