[英]Create header in html/css with @page
9 年前有人问过类似的问题，但由于 HTML/CSS 发生了很大变化，我希望现在有答案。
我想用 HTML 创建一个报告并用标题打印它。 使用页面规则，我创建了一个边距。 是否可以在该边距中添加 HTML？ 下面的例子不起作用。 还有其他方法吗？
<html>
<head>
<title>Order 123456</title>
<style>
@page {
margin-top: 5rem;
}
@media print {
.pageheader {
position: fixed;
top: -3rem;
}
}
</style>
</head>
<body>
<div class="pageheader">
<h1>Order 123456 (header on every page)</h1>
</div>
<h2>Customer: coolstuffstore (header only on first page)</h2>
<table>
<tr>
<th>item</th>
<th>description</th>
<th>price</th>
<th>quantity</th>
<th>amount</th>
</tr>
<tr><td>A00001</td><td>Some cool item</td><td>0.12</td><td>1000</td><td>120</td></tr>
<tr><td>A00001</td><td>Some cool item</td><td>0.12</td><td>1000</td><td>120</td></tr>
<tr><td>A00001</td><td>Some cool item</td><td>0.12</td><td>1000</td><td>120</td></tr>
<tr><td>A00001</td><td>Some cool item</td><td>0.12</td><td>1000</td><td>120</td></tr>
<tr><td>A00001</td><td>Some cool item</td><td>0.12</td><td>1000</td><td>120</td></tr>
<tr><td>A00001</td><td>Some cool item</td><td>0.12</td><td>1000</td><td>120</td></tr>
<tr><td>A00001</td><td>Some cool item</td><td>0.12</td><td>1000</td><td>120</td></tr>
<tr><td>A00001</td><td>Some cool item</td><td>0.12</td><td>1000</td><td>120</td></tr>
<tr><td>A00001</td><td>Some cool item</td><td>0.12</td><td>1000</td><td>120</td></tr>
<tr><td>A00001</td><td>Some cool item</td><td>0.12</td><td>1000</td><td>120</td></tr>
<tr><td>A00001</td><td>Some cool item</td><td>0.12</td><td>1000</td><td>120</td></tr>
<tr><td>A00001</td><td>Some cool item</td><td>0.12</td><td>1000</td><td>120</td></tr>
<tr><td>A00001</td><td>Some cool item</td><td>0.12</td><td>1000</td><td>120</td></tr>
<tr><td>A00001</td><td>Some cool item</td><td>0.12</td><td>1000</td><td>120</td></tr>
<tr><td>A00001</td><td>Some cool item</td><td>0.12</td><td>1000</td><td>120</td></tr>
<tr><td>A00001</td><td>Some cool item</td><td>0.12</td><td>1000</td><td>120</td></tr>
<tr><td>A00001</td><td>Some cool item</td><td>0.12</td><td>1000</td><td>120</td></tr>
<tr><td>A00001</td><td>Some cool item</td><td>0.12</td><td>1000</td><td>120</td></tr>
<tr><td>A00001</td><td>Some cool item</td><td>0.12</td><td>1000</td><td>120</td></tr>
<tr><td>A00001</td><td>Some cool item</td><td>0.12</td><td>1000</td><td>120</td></tr>
<tr><td>A00001</td><td>Some cool item</td><td>0.12</td><td>1000</td><td>120</td></tr>
<tr><td>A00001</td><td>Some cool item</td><td>0.12</td><td>1000</td><td>120</td></tr>
<tr><td>A00001</td><td>Some cool item</td><td>0.12</td><td>1000</td><td>120</td></tr>
<tr><td>A00001</td><td>Some cool item</td><td>0.12</td><td>1000</td><td>120</td></tr>
<tr><td>A00001</td><td>Some cool item</td><td>0.12</td><td>1000</td><td>120</td></tr>
<tr><td>A00001</td><td>Some cool item</td><td>0.12</td><td>1000</td><td>120</td></tr>
<tr><td>A00001</td><td>Some cool item</td><td>0.12</td><td>1000</td><td>120</td></tr>
<tr><td>A00001</td><td>Some cool item</td><td>0.12</td><td>1000</td><td>120</td></tr>
<tr><td>A00001</td><td>Some cool item</td><td>0.12</td><td>1000</td><td>120</td></tr>
<tr><td>A00001</td><td>Some cool item</td><td>0.12</td><td>1000</td><td>120</td></tr>
<tr><td>A00001</td><td>Some cool item</td><td>0.12</td><td>1000</td><td>120</td></tr>
<tr><td>A00001</td><td>Some cool item</td><td>0.12</td><td>1000</td><td>120</td></tr>
<tr><td>A00001</td><td>Some cool item</td><td>0.12</td><td>1000</td><td>120</td></tr>
<tr><td>A00001</td><td>Some cool item</td><td>0.12</td><td>1000</td><td>120</td></tr>
<tr><td>A00001</td><td>Some cool item</td><td>0.12</td><td>1000</td><td>120</td></tr>
<tr><td>A00001</td><td>Some cool item</td><td>0.12</td><td>1000</td><td>120</td></tr>
<tr><td>A00001</td><td>Some cool item</td><td>0.12</td><td>1000</td><td>120</td></tr>
<tr><td>A00001</td><td>Some cool item</td><td>0.12</td><td>1000</td><td>120</td></tr>
<tr><td>A00001</td><td>Some cool item</td><td>0.12</td><td>1000</td><td>120</td></tr>
<tr><td>A00001</td><td>Some cool item</td><td>0.12</td><td>1000</td><td>120</td></tr>
<tr><td>A00001</td><td>Some cool item</td><td>0.12</td><td>1000</td><td>120</td></tr>
<tr><td>A00001</td><td>Some cool item</td><td>0.12</td><td>1000</td><td>120</td></tr>
<tr><td>A00001</td><td>Some cool item</td><td>0.12</td><td>1000</td><td>120</td></tr>
<tr><td>A00001</td><td>Some cool item</td><td>0.12</td><td>1000</td><td>120</td></tr>
<tr><td>A00001</td><td>Some cool item</td><td>0.12</td><td>1000</td><td>120</td></tr>
<tr><td>A00001</td><td>Some cool item</td><td>0.12</td><td>1000</td><td>120</td></tr>
<tr><td>A00001</td><td>Some cool item</td><td>0.12</td><td>1000</td><td>120</td></tr>
<tr><td>A00001</td><td>Some cool item</td><td>0.12</td><td>1000</td><td>120</td></tr>
<tr><td>A00001</td><td>Some cool item</td><td>0.12</td><td>1000</td><td>120</td></tr>
<tr><td>A00001</td><td>Some cool item</td><td>0.12</td><td>1000</td><td>120</td></tr>
<tr><td>A00001</td><td>Some cool item</td><td>0.12</td><td>1000</td><td>120</td></tr>
<tr><td>A00001</td><td>Some cool item</td><td>0.12</td><td>1000</td><td>120</td></tr>
<tr><td>A00001</td><td>Some cool item</td><td>0.12</td><td>1000</td><td>120</td></tr>
</table>
</body>
</html>
一些浏览器会在每个页面上重复thead元素，就像他们应该的那样。 其他人需要一些css属性display: table-header-group;帮助display: table-header-group;
您要在所有页面上显示的页眉位于thead元素内。 以便浏览器将其作为表头并在打印时显示在每个页面上。
<!DOCTYPE html> <html> <style> thead { display: table-header-group; } tbody { display: table-row-group; } @page { size: auto; /* auto is the initial value */ margin: 2mm 4mm 0mm 0mm; /* this affects the margin in the printer settings */ } @media print { .firstpageheader { margin-top: 60px; } .pageheader { position: fixed; top: 0; } } </style> <body> <h2 class="firstpageheader"> Customer: coolstuffstore (header only on first page) </h2> <table> <thead> <tr> <th colspan="5"> <h1>Order 123456 (header on every page)</h1> </th> </tr> <tr> <th>item</th> <th>description</th> <th>price</th> <th>quantity</th> <th>amount</th> </tr> </thead> <tbody> <tr> <td>A00001</td> <td>Some cool item</td> <td>0.12</td> <td>1000</td> <td>120</td> </tr> <tr> <td>A00001</td> <td>Some cool item</td> <td>0.12</td> <td>1000</td> <td>120</td> </tr> <tr> <td>A00001</td> <td>Some cool item</td> <td>0.12</td> <td>1000</td> <td>120</td> </tr> <tr> <td>A00001</td> <td>Some cool item</td> <td>0.12</td> <td>1000</td> <td>120</td> </tr> <tr> <td>A00001</td> <td>Some cool item</td> <td>0.12</td> <td>1000</td> <td>120</td> </tr> <tr> <td>A00001</td> <td>Some cool item</td> <td>0.12</td> <td>1000</td> <td>120</td> </tr> <tr> <td>A00001</td> <td>Some cool item</td> <td>0.12</td> <td>1000</td> <td>120</td> </tr> <tr> <td>A00001</td> <td>Some cool item</td> <td>0.12</td> <td>1000</td> <td>120</td> </tr> <tr> <td>A00001</td> <td>Some cool item</td> <td>0.12</td> <td>1000</td> <td>120</td> </tr> <tr> <td>A00001</td> <td>Some cool item</td> <td>0.12</td> <td>1000</td> <td>120</td> </tr> <tr> <td>A00001</td> <td>Some cool item</td> <td>0.12</td> <td>1000</td> <td>120</td> </tr> <tr> <td>A00001</td> <td>Some cool item</td> <td>0.12</td> <td>1000</td> <td>120</td> </tr> <tr> <td>A00001</td> <td>Some cool item</td> <td>0.12</td> <td>1000</td> <td>120</td> </tr> <tr> <td>A00001</td> <td>Some cool item</td> <td>0.12</td> <td>1000</td> <td>120</td> </tr> <tr> <td>A00001</td> <td>Some cool item</td> <td>0.12</td> <td>1000</td> <td>120</td> </tr> <tr> <td>A00001</td> <td>Some cool item</td> <td>0.12</td> <td>1000</td> <td>120</td> </tr> <tr> <td>A00001</td> <td>Some cool item</td> <td>0.12</td> <td>1000</td> <td>120</td> </tr> <tr> <td>A00001</td> <td>Some cool item</td> <td>0.12</td> <td>1000</td> <td>120</td> </tr> <tr> <td>A00001</td> <td>Some cool item</td> <td>0.12</td> <td>1000</td> <td>120</td> </tr> <tr> <td>A00001</td> <td>Some cool item</td> <td>0.12</td> <td>1000</td> <td>120</td> </tr> <tr> <td>A00001</td> <td>Some cool item</td> <td>0.12</td> <td>1000</td> <td>120</td> </tr> <tr> <td>A00001</td> <td>Some cool item</td> <td>0.12</td> <td>1000</td> <td>120</td> </tr> <tr> <td>A00001</td> <td>Some cool item</td> <td>0.12</td> <td>1000</td> <td>120</td> </tr> <tr> <td>A00001</td> <td>Some cool item</td> <td>0.12</td> <td>1000</td> <td>120</td> </tr> <tr> <td>A00001</td> <td>Some cool item</td> <td>0.12</td> <td>1000</td> <td>120</td> </tr> <tr> <td>A00001</td> <td>Some cool item</td> <td>0.12</td> <td>1000</td> <td>120</td> </tr> <tr> <td>A00001</td> <td>Some cool item</td> <td>0.12</td> <td>1000</td> <td>120</td> </tr> <tr> <td>A00001</td> <td>Some cool item</td> <td>0.12</td> <td>1000</td> <td>120</td> </tr> <tr> <td>A00001</td> <td>Some cool item</td> <td>0.12</td> <td>1000</td> <td>120</td> </tr> <tr> <td>A00001</td> <td>Some cool item</td> <td>0.12</td> <td>1000</td> <td>120</td> </tr> <tr> <td>A00001</td> <td>Some cool item</td> <td>0.12</td> <td>1000</td> <td>120</td> </tr> <tr> <td>A00001</td> <td>Some cool item</td> <td>0.12</td> <td>1000</td> <td>120</td> </tr> <tr> <td>A00001</td> <td>Some cool item</td> <td>0.12</td> <td>1000</td> <td>120</td> </tr> <tr> <td>A00001</td> <td>Some cool item</td> <td>0.12</td> <td>1000</td> <td>120</td> </tr> <tr> <td>A00001</td> <td>Some cool item</td> <td>0.12</td> <td>1000</td> <td>120</td> </tr> <tr> <td>A00001</td> <td>Some cool item</td> <td>0.12</td> <td>1000</td> <td>120</td> </tr> <tr> <td>A00001</td> <td>Some cool item</td> <td>0.12</td> <td>1000</td> <td>120</td> </tr> <tr> <td>A00001</td> <td>Some cool item</td> <td>0.12</td> <td>1000</td> <td>120</td> </tr> <tr> <td>A00001</td> <td>Some cool item</td> <td>0.12</td> <td>1000</td> <td>120</td> </tr> <tr> <td>A00001</td> <td>Some cool item</td> <td>0.12</td> <td>1000</td> <td>120</td> </tr> <tr> <td>A00001</td> <td>Some cool item</td> <td>0.12</td> <td>1000</td> <td>120</td> </tr> <tr> <td>A00001</td> <td>Some cool item</td> <td>0.12</td> <td>1000</td> <td>120</td> </tr> <tr> <td>A00001</td> <td>Some cool item</td> <td>0.12</td> <td>1000</td> <td>120</td> </tr> <tr> <td>A00001</td> <td>Some cool item</td> <td>0.12</td> <td>1000</td> <td>120</td> </tr> <tr> <td>A00001</td> <td>Some cool item</td> <td>0.12</td> <td>1000</td> <td>120</td> </tr> <tr> <td>A00001</td> <td>Some cool item</td> <td>0.12</td> <td>1000</td> <td>120</td> </tr> <tr> <td>A00001</td> <td>Some cool item</td> <td>0.12</td> <td>1000</td> <td>120</td> </tr> <tr> <td>A00001</td> <td>Some cool item</td> <td>0.12</td> <td>1000</td> <td>120</td> </tr> <tr> <td>A00001</td> <td>Some cool item</td> <td>0.12</td> <td>1000</td> <td>120</td> </tr> <tr> <td>A00001</td> <td>Some cool item</td> <td>0.12</td> <td>1000</td> <td>120</td> </tr> <tr> <td>A00001</td> <td>Some cool item</td> <td>0.12</td> <td>1000</td> <td>120</td> </tr> <tr> <td>A00001</td> <td>Some cool item</td> <td>0.12</td> <td>1000</td> <td>120</td> </tr> <tr> <td>A00001</td> <td>Some cool item</td> <td>0.12</td> <td>1000</td> <td>120</td> </tr> </tbody> </table> </body> </html>
回答你的问题，没有。 详细说明; @Page是不好反正支持
但是还有其他选项，例如直接将 HTML 标题与其余部分一起提供，但仅在作为块级元素打印时显示它，甚至还可以添加页码和其他内容......例如快速概念证明（又名，需要一些调整）；
@media print {
header#print-header {
display: block;
}
}
header#print-header {
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
padding: 1rem;
background-color: green;
color: green;
page-break-before: always;
counter-increment: page;
}
header#print-header:after {
content: " PAGE - " counter(page);
position: absolute;
bottom: .25rem;
right: 1rem;
}
<header id="print-header">
<h1>HEY I'M A HEADER! WEEEEEE!</h1>
</header>
Stuff Stuff Stuff....
如何使用CSS和图像在HTML页面中创建圆形标题部分？
[英]How to use css and images to create a rounded header section in an HTML page?
CSS @page 不适用于更新打印 html 页面的页眉和页脚
[英]CSS @page not working for update header and footer of print html page
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.