Repeat header on each page using css while printing

Question

I have a project which requires printing an HTML table with many rows. I want to display thead section on top of each page. I am using IE11 browser.

<style>
    @media print {
        #Header {
            display: table-header-group;
        }

        table {
            page-break-inside: auto;
        }

        tr {
            page-break-inside: auto;
            position: static;
        }
    }
</style>


<div class="tab-pane active " id="template">
    <table>
        <thead>
            <div id="Header">
                <table style="width: 100%; table-layout: fixed;" id="tbl_1" class="table table-bordered">
                    <tbody>
                        <tr id="1">
                            <td style="height: 18px; border:solid; " ></td>
                            <td style="height: 18px; border:solid; "></td>
                            <td style="height: 18px; border:solid; "></td>
                            <td style="height: 18px; border:solid; "></td>
                        </tr>
                        <tr id="2">
                            <td style="height: 18px; border:solid; "></td>
                            <td style="height: 18px; border:solid; "></td>
                            <td style="height: 18px; border:solid; "></td>
                            <td style="height: 18px; border:solid; "></td>
                        </tr>

                    </tbody>
                </table>
            </div>
        </thead>
        <tbody>
            <div id="contents">
                <!--more then 800 rows in table-->
            </div>
        </tbody>
    </table>
</div>

Does this help? [HTML header/footer](http://stackoverflow.com/questions/1360869/how-to-use-html-to-print-header-and-footer-on-every-printed-page-of-a-document-w) — Whothehellisthat, Aug 22 '16 at 12:33
Your HTML is wrong. The table header just should have the rows and not a div with another table. TheI is.no need for and media css to repeat table headers. — Kevin Brown, Aug 22 '16 at 16:16
have you tried setting the header id to be position: fixed with top: 0? I know that works with certain implementations. — Alex Tarkowski, Dec 02 '16 at 18:31
Possible duplicate of [How to use HTML to print header and footer on every printed page of a document?](https://stackoverflow.com/questions/1360869/how-to-use-html-to-print-header-and-footer-on-every-printed-page-of-a-document) — Ashraf Sada, Sep 17 '17 at 18:35

score -1 · Answer 1 · answered May 15 '17 at 00:39

It is possible that you could achieve this with the implementation of PHP. When I wirst started PHP my instructor just had us create a 'web template' using PHP. This 'template' would ensure that the page would be similar and have a consistent header, navigation, footer, etc.

You can create a file (thead.php) which would have all of the code you want to repeat. I am presuming you want to repeat the content between <thead></thead>

(thead.php)

<thead>
    <div id="Header">
        <table style="width: 100%; table-layout: fixed;" id="tbl_1" class="table table-bordered">
            <tbody>
                <tr id="1">
                    <td style="height: 18px; border:solid; " ></td>
                    <td style="height: 18px; border:solid; "></td>
                    <td style="height: 18px; border:solid; "></td>
                    <td style="height: 18px; border:solid; "></td>
                </tr>
                <tr id="2">
                    <td style="height: 18px; border:solid; "></td>
                    <td style="height: 18px; border:solid; "></td>
                    <td style="height: 18px; border:solid; "></td>
                    <td style="height: 18px; border:solid; "></td>
                </tr>
            </tbody>
        </table>
    </div>
</thead>

(yourfile.php)

<style>
@media print {
    #Header {
        display: table-header-group;
    }

    table {
        page-break-inside: auto;
    }

    tr {
        page-break-inside: auto;
        position: static;
    }
}
</style>


<div class="tab-pane active " id="template">
    <table>
        <?php include 'thead.php'; ?>
        <tbody>
            <div id="contents">
                <!--more then 800 rows in table-->
            </div>
        </tbody>
    </table>
</div>

This would cause you to have to change your file types to .php and you would have to use a local server for testing, since browsers can't process .php files. I use XAMPP personally but I am sure there are numerous other alternatives.

In case you don't know any php already, what it does is essentially write an HTML file for you based on the information given to it through the script in your .PHP file. By the time the file gets to the browser after running through a server it is just simple HTML code which can be processed and displayed. So the final file that gets to the browser won't be any different if you do it the way I have shown you, there is just less code for you to have to write.

Repeat header on each page using css while printing

1 Answers1