What is the optimal height for a header that will allow for a repeating header on each printed page of a website?

Question

What is the optimal height for a header that will allow for a repeating header on each printed page of a website?

I have encountered an issue with my report while using the print option in Chrome. I need to ensure that my headers are repeated on each page.

To structure my content properly, I have divided it as shown below and it is currently functioning correctly:

<table>
    <thead>
        <!-- Header Content (needs to repeat) -->
    </thead>
    <tbody>
        <!-- Body Content -->
    </tbody>
</table>

However, this method only works up to a certain height of the header. If the header exceeds a certain height, the repeating function stops working.

I noticed that changing the paper size from standard A4 to a larger size, like A3, allows the repeating header to work for the taller header. Conversely, if the repeating header is functional on A4 paper but the paper size is reduced to A5, the functionality is lost.

I am unable to determine the exact height at which the issue occurs, but it has affected both my live project and sample tests.

Please take a look at the samples provided and let me know if there is something missing or if any adjustments need to be made.

https://i.sstatic.net/e9xGu.png https://i.sstatic.net/fUrBU.png https://i.sstatic.net/BKYYo.png https://i.sstatic.net/wVnnu.png

html css

Answer 1

Answer №1

The limit is set at 245px in Chrome, but depending on the content, it might need to be reduced. We've seen good results by keeping it under 230px.

If you require more space, one workaround is splitting the content into two sections, each limited to 230px. The trick is to stack multiple table headers together to create the illusion of a single large header. Nest a second table within the tbody. It's not a perfect solution, but it gets the job done. Hopefully, this advice proves helpful.

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="example.css" />
</head>
<body>
    <table class="w-100">
        <thead>
            <tr>
                <td>
                    <!--placeholder for the fixed-position header-->
                    <div class="header1">
                        <h1>Header #1</h1>
                    </div>
                </td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>
                    <table class="w-100">
                        <thead>
                            <tr>
                                <td>
                                    <div>
                                        <div class="header2">
                                         <h1>Header #2</h1>
                                        </div>
                                    </div>
                                </td>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>
                                <p>Lorem ipsum dolor sit amet... [content continues]
                                </p>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>
                    <!--placeholder for the fixed-position footer-->
                    <div class="page-footer-space"></div>
                </td>
            </tr>
        </tfoot>
    </table>
    <div class="footer w-100">
        <h2>footer</h2>
    </div>
</body>

</html>

CSS:

.header1, .page-header-space {
    height: 230px!important;
    overflow:hidden;
}

.footer, .page-footer-space {
    height: 230px;
}

.header1{
    background-color: rgba(223, 223, 223, 0.5);
}

.header2{
    background-color: rgba(223, 223, 223, 0.5);
    height:230px;
}

.footer{
    background-color: rgba(223, 223, 223, 0.5);
}

@media print{
    .page-header, .page-header-space {
        height: 230px!important;
        overflow:hidden;
    }

    .footer {
        position: fixed;
        bottom: 1px;
    }
    thead {display: table-header-group;}
    tfoot {display: table-footer-group;}
    body {margin: 0;}
}


.w-100{width:100%;}



/*---Reset---*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    border-spacing:0;
}

Answer 2

The limit is set at 245px in Chrome, but depending on the content, it might need to be reduced. We've seen good results by keeping it under 230px.

If you require more space, one workaround is splitting the content into two sections, each limited to 230px. The trick is to stack multiple table headers together to create the illusion of a single large header. Nest a second table within the tbody. It's not a perfect solution, but it gets the job done. Hopefully, this advice proves helpful.

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="example.css" />
</head>
<body>
    <table class="w-100">
        <thead>
            <tr>
                <td>
                    <!--placeholder for the fixed-position header-->
                    <div class="header1">
                        <h1>Header #1</h1>
                    </div>
                </td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>
                    <table class="w-100">
                        <thead>
                            <tr>
                                <td>
                                    <div>
                                        <div class="header2">
                                         <h1>Header #2</h1>
                                        </div>
                                    </div>
                                </td>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>
                                <p>Lorem ipsum dolor sit amet... [content continues]
                                </p>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>
                    <!--placeholder for the fixed-position footer-->
                    <div class="page-footer-space"></div>
                </td>
            </tr>
        </tfoot>
    </table>
    <div class="footer w-100">
        <h2>footer</h2>
    </div>
</body>

</html>

CSS:

.header1, .page-header-space {
    height: 230px!important;
    overflow:hidden;
}

.footer, .page-footer-space {
    height: 230px;
}

.header1{
    background-color: rgba(223, 223, 223, 0.5);
}

.header2{
    background-color: rgba(223, 223, 223, 0.5);
    height:230px;
}

.footer{
    background-color: rgba(223, 223, 223, 0.5);
}

@media print{
    .page-header, .page-header-space {
        height: 230px!important;
        overflow:hidden;
    }

    .footer {
        position: fixed;
        bottom: 1px;
    }
    thead {display: table-header-group;}
    tfoot {display: table-footer-group;}
    body {margin: 0;}
}


.w-100{width:100%;}



/*---Reset---*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    border-spacing:0;
}

What is the optimal height for a header that will allow for a repeating header on each printed page of a website?

Answer №1

Similar questions

Waypoints script behaving unexpectedly

The sticky navigation bar hack (implementing fixed positioning with jQuery)

What could be causing the malfunction of slideToggle in this situation?

Is it possible to perform a CSS flip animation without delay?

"Encountering issues with hyperlink tags in app engine - they are not functioning

Customizing Background Color in React Bootstrap Table Based on Value

The problem of duplicate ids: Once an id is used, it cannot be

Does Xamarin.Forms have a feature similar to html datalist that enables the selection of predefined values while also allowing for the input of free text?

What is the best way to incorporate Tradingview's JavaScript into the render function of a React Typescript

Tips for loading HTML content before executing any JavaScript code or requesting user input via prompt

Struggling with jQuery not updating class attributes for list items, any solutions to resolve this issue?

Enhancing User Experience with CSS

Refreshing the page to fetch dynamically updated content

The headers in the div section are not properly aligned on the webpage

Transform CSS into JavaFx CSS

Pinpointing a specific region within an image by utilizing offsets

What is the best way to play a random song when the user clicks a button?

Designing a scrollbar for a tr element using HTML and CSS

How to reduce the default width of Bootstrap carousel components

Anticipated scenarios when using selenium