7

I've created a html page with a header,some content and a footer. I tried to get a print of the HTML page, and there was 2 pages. I got the header in first page and the footer in the last page.

What i really need is the header and footer to show in all the pages like in a word document.

I checked and found that using the table format with the thead and tfoot,it can be done. It worked in firefox and IE, but it's not working in chrome. Is this some webkit browser compatibility problem??

Is there any other way which is compatible with all browsers.

Update: As of April 2021, the bug is still open https://bugs.webkit.org/show_bug.cgi?id=17205. as mentioned below by SHAKU here https://stackoverflow.com/a/34884220/2776433

Bennet Sam
  • 116
  • 1
  • 1
  • 5
  • 2
    It's a bit unclear what you are doing. You have tagged the question with HTML5 and talked about some header and footer (which could be `
    ` and `
    ` elements) but then mention `` and ``.
     – feeela Sep 13 '13 at 12:49
  • i used
    and
    to create the header and footer.but when i tried to print the html page.the header came in one page and footer in another page.So i changed that and used thead for header and tfoot for footer,for getting a header and footer like that we see in word documents, only when printing. I hope u r getting a clearer pic
     – Bennet Sam Sep 13 '13 at 12:56
  • 1
    Not really as `thead` and `tfoot` are table element and thus your whole layout seems to be realized as [table-layout](http://stackoverflow.com/questions/83073/why-not-use-tables-for-layout-in-html). Nonetheless you can control page breaks be [one of the CSS `page-break-*` properties](https://developer.mozilla.org/en-US/docs/Web/CSS/page-break-inside). – feeela Sep 13 '13 at 13:01
  • but this seems to work only when i open in firefox or IE. In chrome, it doesn't seem to have any effect. – Bennet Sam Sep 13 '13 at 13:05
  • 1
    Check this out: http://stackoverflow.com/questions/1360869/html-print-header-footer – Bjorn Smeets Sep 13 '13 at 13:06
  • @ Bjorn Smeets : Tried the same but it didn't respond. – Bennet Sam Sep 13 '13 at 13:12
  • 2
    @feeela : Correct me if I'm wrong ,but CSS page-break-* properties are used for page-break. What i'm looking for is a way to get the header and footer of an HTML doc to come in all the pages while printing. – Bennet Sam Sep 13 '13 at 13:15
  • Still no solution in 2015. Sigh. – Dustin Graham Feb 25 '15 at 17:38
  • Here's a [duplicate](https://stackoverflow.com/q/6428528/712526), with some very different answers. – jpaugh Jul 09 '18 at 15:32

4 Answers4

4

You can target print styles specifically with the "@print" css media style definition. This will allow you to create individual styles strictly for when the document is being printed, and in print preview.

I would start with this as a solid base.

    @media print {

    * {
        color: #000 !important;
        -webkit-text-shadow: none !important;
        text-shadow: none !important;
        font-family: "Times New Roman", Times, serif;
        background: transparent !important;
        -webkit-box-shadow: none !important;
        box-shadow: none !important;
        border: none!important;
        font-weight: normal!Important;
    }

    header, nav, footer {
       overflow:visible;
    }

    .body {
        width: auto;
        border: 0;
        margin: 0 5%;
        padding: 0;
        float: none !important;
    }


    a, a:link, a:visited {

        &[href]:after {
            content: " (" attr(href) ") ";
            font-size: 90%;
        }

        &[href^="javascript:"],
        &[href^="#"] {
            &:after {
                content: "";
            }
        }
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group;
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    @page {
        margin: 0.5cm;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}
Abdel Raoof Olakara
  • 19,223
  • 11
  • 88
  • 133
Ryan
  • 295
  • 2
  • 8
2

Use fixed positioned elements that you activate with print media type:

#header, #footer {
     display: none;
}
@media print
{
    #header, #footer {
         position: fixed;
         display: block;
         top: 0;
    }
    #footer {
         bottom: 0;
    }
}

(Here assuming you have div elements with id header and footer).

  • Thanks for the answer.I tried this. For an html which prints only one page,its working fine. The header and footer comes at top and bottom perfectly. But when there is more than one page, the footer comes in the last page when print. – Bennet Sam Sep 27 '13 at 09:29
  • @BennetSam and if you insert an element like: `
    ` at the places you want to break the content? (you should also be able to style the div further as well). This of course forces breaks at certain points instead if having the browser determine the breaks.     –  Sep 27 '13 at 09:56
2

I had the same problem and found simple tags to work best for me.

<table>
  <thead>
    <tr><td>
      content that should be printed as page header
    </td></tr>
  </thead>
  <tbody>
    <tr><td>
      content that will be spread over all pages consecutively
    </td></tr>
  </tbody>
</table>

The table will look like a simple table in the browser, but in printouts the content of the <thead> tag is repeated on each page. No CSS required.

Tested in Firefox 32, IE 11 and even in MS Word 2010. Word does not translate the tag into "real" page headers, but repeats the content on top of each page. (You may have to switch to "Page View" to actually see the difference in Word).

Elmy
  • 211
  • 3
  • 9
  • As of January 4th, 2016 this does work in Firefox and IE but Chrome unfortunately does not repeat thead tags on each printout page – Marko Jan 04 '16 at 15:11
  • Works fine in Chrome, Firefox and even MS-Word. I'm trying to make Tfoot work in a similar way, and it does in browsers, but not in MS-Word. Any suggestions? – Irikos Nov 15 '18 at 14:40
1

none of the above answers are not really the answer for the question asked. From my experience there is no single clean solution right now available. Feel like chrome is purposefully avoiding this bug. https://bugs.webkit.org/show_bug.cgi?id=17205.

SHAKU
  • 657
  • 5
  • 15