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>

harish kumar · Accepted Answer · 2019-08-12T21:17:33.777

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>

Thanks, this works fine. Not sure why .firstpageheader is used? Seems to work fine without it. — roeland, Aug 12 '19 at 21:15
You can use `firstpageheader` class to adjust it using css according to you. You can see I gave it `margin-top: 60px` to make it in proper format when printing it and you can play with it according to your needs. :) — harish kumar, Aug 12 '19 at 21:20

score 0 · Answer 2 · edited Aug 12 '19 at 20:55

0

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....

edited Aug 12 '19 at 20:55

roeland

6,058
7
50
67

answered Aug 12 '19 at 20:01

Chris W.

22,835
3
60
94

display: none always overrides display:block for me. After adding !important it does repeat the header but above the content. This doesn't seem to be a working solution. – roeland Aug 12 '19 at 21:04
Hence the "eg quickie proof of concept (aka, would require some tweaking)" comment because I don't have time to print out tests etc on questions like this, but hope you find your ideal remedy for your work, cheers! – Chris W. Aug 12 '19 at 21:11

Create header in html/css with @page

2 Answers2