Create header in html/css with @page
Question
A similar question is asked 9 years ago, but since a lot changed in HTML/CSS I hope there is an answer now.
I would like to create a report in HTML and print it with a header. With the page at-rule, I created a margin. Is it possible to add HTML in that margin? The example below doesn't work. Is there another way?
<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>
2 answers
solution1
3 ACCPTED 2019-08-12 20:01:27
Some browsers repeat thead element on each page, as they are supposed to. Others need some help with css property display: table-header-group;
The header you want to display on all pages is inside thead element. So that browser will take it as the table header and display on each pages during print.
<!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>
solution2
0 2019-08-12 20:01:52
To answer your question, no. To elaborate; @Page is poorly supported anyway
However there's other options, like providing your HTML header directly in with the rest of it, but only displaying it when printing as a block level element, and can even add page numbers and stuff too...eg quickie proof of concept (aka, would require some tweaking);
@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....
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
How to use css and images to create a rounded header section in an HTML page?
Header above the page scroll HTML CSS
html - css - print page - header repeat not working
How to fix the header of HTML page using css
add header to html page in printing by css
Create fixed header using html and css
HTML/CSS: empty page + only header page when printing table
CSS @page not working for update header and footer of print html page
Create a dynamic Products page with just html/css?
Page break using CSS in HTML to create PDF
Related Tags