请原谅我的标题，我找不到更准确的描述。
我把一个表中的一长行分成几页。TR的分页后一切都很好。我唯一的问题是，它从最开始到最底部，使我的页眉和页脚被表数据覆盖。我试着把边距和填充到处，但似乎没有工作。下面是我的CSS，
@media print {
html, body {
width: 210mm;
height: 297mm;
background:#fff;
}
.page-layout {
border: initial;
border-radius: initial;
width: initial;
min-height: initial;
box-shadow: initial;
background: initial;
page-break-after: always;
}
table.report { page-break-after:auto }
table.report tr { page-break-inside:avoid; page-break-after:auto }
table.report td { page-break-inside:avoid; page-break-after:auto }
table.report thead { display:table-header-group; margin-top:50px; }
table.report tfoot { display:table-footer-group }
.header {
display:block;
position:fixed;
top: 0px;
font-weight:bold;
font-size:14px;
text-align:right;
right:0px;
}
.footer {
z-index: 1;
position: fixed;
left: 0;
bottom: 0;
text-align: left;
left: 0;
width:100%;
display:block;
}
}下面是我的HTML
<div class="header">MY HEADER</div>
<div class="page-layout">
<div style="font-weight:bold; font-size:14px; text-align:center; margin-bottom:20px">REPORT TITLE</div>
<table width="100%" border="1" style="border-collapse:collapse" class="report">
<thead>
<tr>
<th width="10%">Col1</th>
<th width="60%">Col2</th>
<th width="10%">Col3</th>
<th width="20%">Col4</th>
</tr>
</thead>
<tbody>
<?php for ($x=1; $x<100; $x++) {//loop ?>
<tr>
<td align="center"><?=$x?></td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<?php } //endloop ?>
</tbody>
</table>
</div>
<div class="footer">MY FOOTER</div>以下是打印
时的外观
6条答案
按热度按时间sqougxex1#
在网上深入研究后，我发现没有合适的方法来实现它。有一个关于@page规则的讨论，这可能是我想要实现的。不幸的是，它没有起作用。我了解到这个功能还没有在大多数浏览器上实现。我不知道哪个浏览器支持它。最后，我发现了一些小窍门。2头和脚是设计来重复打印的。3所以我在头顶部放了一个空行，每次重复的时候都留下一个空白。刚好够显示页眉。在tfoot下面还有一个空行作为页脚区域。不幸的是，tfoot没有在chrome上重复。IE和Firefox都可以。
rpppsulh2#
如果你有这类问题，当表开始之前和之后需要一些额外的空间用于其他页脚，像这样：
你可以这样修正它：
结果如下：
inb24sb23#
您可以使用
klr1opcd4#
我已经能够通过在最顶层元素上设置
position: relative; top: 100px;来解决我的用例中的这个问题。mzmfm0qo5#
在单元格中添加page-break-inside：avoid对我很有效：
5sxhfpxr6#
试试这个