jay*_*dub 16 printing google-chrome html-table
我网站的用户需要能够打印包含第一页打印页面上的内容的网页,然后是第二页上的表格.精简版是(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中,表头在第二页上打印两次:一次没有上边距,一次有上边距其次是表格的其余部分.它曾经在Windows的早期版本中正常打印,但我不知道这是否是Chrome 52(绝对是在最后几个版本中).它还可以在Firefox中按预期打印.
我找到了一个解决方法,即在真正的'thead'元素之前放置一个空的'thead'元素,但是这个解决方案非常麻烦,让我感到不舒服.
是否有更强大的解决方法可能不会在浏览器中产生副作用？
| 归档时间： |
|
| 查看次数： |
5168 次 |
| 最近记录： |