Include an HTML header and footer on every page when printing an HTML document

Question

Include an HTML header and footer on every page when printing an HTML document

I designed an HTML page with a header, content, and footer. When I attempted to print the page, it spanned across 2 pages with the header on the first page and the footer on the last page.

My goal is to have the header and footer display on every page, similar to how it works in a Word document.

I discovered that using a table format with thead and tfoot achieves this result. It worked in Firefox and IE, but unfortunately not in Chrome. Could this be due to a webkit browser compatibility issue?

Is there another method that is compatible with all browsers?

Update: As of April 2021, the bug remains unresolved . as noted below by SHAKU here

html css

Answer 1

Answer №1

If you want to style your document specifically for printing purposes, you can use the "@print" media query in CSS. This allows you to create custom styles that will only be applied when the document is being printed or in print preview.

Here is a solid starting point for creating print-specific styles:

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

Answer 2

If you want to style your document specifically for printing purposes, you can use the "@print" media query in CSS. This allows you to create custom styles that will only be applied when the document is being printed or in print preview.

Here is a solid starting point for creating print-specific styles:

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

Answer 3

Answer №2

To achieve a fixed position for certain elements based on print media type, you can utilize the following CSS code:

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

(In this scenario, it is assumed that there are div elements with id navbar and sidebar).

Answer 4

To achieve a fixed position for certain elements based on print media type, you can utilize the following CSS code:

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

(In this scenario, it is assumed that there are div elements with id navbar and sidebar).

Answer 5

Answer №3

After encountering a similar issue, I discovered that using basic HTML tags proved to be the most effective solution for me.

<table>
  <thead>
    <tr><td>
      Content to be displayed as the page header
    </td></tr>
  </thead>
  <tbody>
    <tr><td>
      Content that will appear on every printed page consecutively
    </td></tr>
  </tbody>
</table>

While the table appears like a standard table in the web browser, during printing, the content within the <thead> tag is repeated on each page without the need for any CSS styling.

This method has been tested successfully in various browsers including Firefox 32 and IE 11, as well as in Microsoft Word 2010. In Word, the tag isn't converted into traditional page headers, but instead replicates the content at the top of each page (switching to "Page View" may be necessary to observe this distinction).

Answer 6

After encountering a similar issue, I discovered that using basic HTML tags proved to be the most effective solution for me.

<table>
  <thead>
    <tr><td>
      Content to be displayed as the page header
    </td></tr>
  </thead>
  <tbody>
    <tr><td>
      Content that will appear on every printed page consecutively
    </td></tr>
  </tbody>
</table>

While the table appears like a standard table in the web browser, during printing, the content within the <thead> tag is repeated on each page without the need for any CSS styling.

This method has been tested successfully in various browsers including Firefox 32 and IE 11, as well as in Microsoft Word 2010. In Word, the tag isn't converted into traditional page headers, but instead replicates the content at the top of each page (switching to "Page View" may be necessary to observe this distinction).

Answer 7

Answer №4

It seems that none of the previously mentioned responses truly address the question at hand. Based on my own experiences, there doesn't appear to be a straightforward solution currently accessible. It almost appears as though Chrome is intentionally overlooking this issue. You can read more about it here: .

Answer 8

It seems that none of the previously mentioned responses truly address the question at hand. Based on my own experiences, there doesn't appear to be a straightforward solution currently accessible. It almost appears as though Chrome is intentionally overlooking this issue. You can read more about it here: .

Include an HTML header and footer on every page when printing an HTML document

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

How to centrally align text in list items using Bootstrap 5

Explore the Shopify assistance on the secondary blog section within a separate page

Angular child component displaying of table data is not looping properly

Error: AngularJS: Invalid Argument Error. The argument 'ClientCtrl' is not defined as a function, it is currently undefined

Steps for updating the homepage to display a personalized welcome message to the user after logging in and redirecting using node.js and

Having trouble with the JSFiddle dropdown button that is unresponsive to

Tips for selectively applying CSS to a single HTML file

Problem with JavaScript regular expressions and enumeration

Place the HTML onto a fresh page

Instructions for changing the background color of a value

Ensure that all elements with the :hover event have a text color of #fff in CSS

"Selecting options from a range - Bootstrap multiple

Activate hover effect on desktop screen (excluding tablets and phones) by utilizing media queries

In what way can you reach an unfamiliar form within a controller?

After clicking, the radio button in Bootstrap 4 shifts to the left

Glitch in Safari 6: Round Corners Issue

Hover over an element to trigger the background fading effect on the parent div

Modify the input field for weight in WooCommerce to accommodate alphabetic characters

Is it possible to impose dimensions on a content-editable div?

What could be the reason for the child elements not being centered in a bootstrap navbar in this basic code example