CODEWITHSUNDEEP
htmlcss
Bennet Sam
Bennet Sam

Reputation: 136

HTML Header and footer in all pages while printing html document

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

Upvotes: 9

Views: 29488

Answers (4)

SHAKU
SHAKU

Reputation: 687

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.

Upvotes: 1

Ryan
Ryan

Reputation: 291

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;
    }
}

Upvotes: 4

Elmy
Elmy

Reputation: 209

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

Upvotes: 2

user1693593
user1693593

Reputation:

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

Upvotes: 2

Related Questions