我有这个html:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Test</title>
<style type="text/css">
table {
page-break-inside: auto;
margin-top: 50mm;
margin-bottom: 50mm;
}
tr { page-break-inside: auto; page-break-after: auto }
thead { display: table-header-group;}
tfoot { display: table-footer-group;}
#header {
position: fixed;
width: 100%;
top: 0;
left: 0;
right: 0;
}
#footer {
position: fixed;
width: 100%;
bottom: 0;
left: 0;
right: 0;
}
</style>
</head>
<body>
<div id="header">
<p>Personalised header</p>
</div>
<div id="footer">
<p>Personalised footer</p>
</div>
<table>
<thead>
<tr><th>heading</th></tr>
</thead>
<tfoot>
<tr><td>notes</td></tr>
</tfoot>
<tbody>
<tr>
<td>x</td>
</tr>
<tr>
<td>x</td>
</tr>
<tr>
<td>x</td>
</tr>
<tr>
<td>x</td>
</tr>
<!-- Mor than 500 similar tr-->
<tr>
<td>x</td>
</tr>
</tbody>
</table>
</body>
</html>
这是一张大桌子。
表格有上下页边距,但只在第一页打印时应用上页边距,在最后一页打印时应用下页边距:
我怎样才能解决这个问题?我想要页面页眉和页脚的固定位置,但我想要的页边空白表适用于所有打印页面。
最佳答案
您可以使用@page选择器在页面周围添加间距,如下所示:
@page { margin: 50px }