2

Is it possible, with any mix of HTML and/or CSS, to display one header on the first printed page and then display a different header on each subsequent printed page? I know about the @media print CSS tag to only display something when the site is printed, but that doesn't get me to having different headers on multiple pages.

Any help is appreciated, thanks!

JToland
  • 3,630
  • 12
  • 49
  • 70
  • Print stylesheet support is very limited. The only way to repeat a header, I know, is using a table. thead elements are repeated on every page (not sure if it works in all browsers). – Gerben Jun 21 '11 at 18:22
  • Yea, I actually have to do that as well for tables on the site. I believe the `` tag is supported at least by all modern, non-WebKit browsers at this point. – JToland Jun 21 '11 at 18:27
  • Here's a [duplicate](https://stackoverflow.com/q/18786653/712526), with some very different answers. – jpaugh Jul 09 '18 at 15:31

3 Answers3

3

Twelve years later I can answer your question :)

Here is a solution to display a different header on the first print page than on the following pages :

@media print {

  .header, .footer {
      position: fixed;
  }
  
  .header, .header-cover {
    display:flex;
  }

  .header {
      top: 100%;
  }
  
  .header, .header-space {
      height: 5rem;
  }
  
  .footer, .footer-space {
    height: 4rem;
  }
  
  .footer {
      bottom: 0;
  }
}
<body>
<!--Here the HTML of the first header (displayed on landing page)-->
<header class="header-cover">
    <img class="logo-big"
         src="https://picsum.photos/150/100" />
    <div class="right">
        Header 1
    </div>
</header>

  <!-- Here the HTML of the repeated header (on others pages)-->
<header class="header">
   <img class="logo-big"
         src="https://picsum.photos/200/100" />
    <div class="right">
        Repeated Header 
    </div>
</header>
<table>
    <thead>
    <tr>
        <td>
            <!--place holder for the fixed-position header-->
            <div class="header-space">&nbsp;</div>
        </td>
    </tr>
    </thead>

    <tbody>
    <tr>
        <td>
            <!--*** CONTENT GOES HERE ***-->
            <h1>Title</h1>
            <p class="content">A very long text....</p>
        </td>
    </tr>
    </tbody>

    <tfoot>
    <tr>
        <td>
            <!--place holder for the fixed-position footer-->
            <div class="footer-space">&nbsp;</div>
        </td>
    </tr>
    </tfoot>
</table>
<!-- Repeated Footer -->
<footer class="footer">
    <p>
        Text footer
    </p>
</footer>
<button onclick="window.print()">Test Here</button>
</body>
esther44
  • 53
  • 7
1

from http://css-discuss.incutio.com/wiki/Printing_Headers

If you want full, CSS-controlled print headers and footers, you'll need to wait until browsers implement support for the CSS3 Paged Media Candidate Recommendation. It explicitly provides for the facility but in a quite different way, using margin boxes.

probably because...

... the CSS description of position: fixed, [is] namely "... In the case of the print media type, the box is rendered on every page, and is fixed with respect to the page ..." [Section 9.3.1]

...but the article says it doesn't work as of these days.

BUT, to help you, later the article says:

Setting a top margin on body (for example) will work only for the first page.

ecchymose
  • 663
  • 6
  • 19
1

The only way I can see how to do it is to use different headers and forced page-breaks.

So

PAGE 1 

   HEADER 1 //display only on print

   CONTENT....

   PAGE BREAK DIV //display only on print

PAGE 2 

   HEADER 2 //display only on print

   CONTENT....

   PAGE BREAK DIV //display only on print

etc..

Your headers would get a class of printHeaders

Your page break div would be something like <div class="pageBreak"></div>

In your CSS, you would have something akin to 

  .printHeaders, .pageBreak  {display:none;}

@media print {
  .printHeaders, .pageBreak  {display:block;}
  .pageBreak  {page-break-before:always;}
}
Jason Gennaro
  • 34,535
  • 8
  • 65
  • 86
  • Unfortunately, I can't force the page breaks due to very large, dynamic tables that will be hard to manually 'break' correctly. Though, thanks for the solution. This could be useful for another project actually... – JToland Jun 22 '11 at 15:47
  • No probs. Hope it helps with the other project! – Jason Gennaro Jun 22 '11 at 15:50