Repeat the title on each page using css while printing.

Question

I have a project that requires printing an HTML table with many rows. I want to display a section theadon 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>

Answer 1

Perhaps you could achieve this with a PHP implementation. When I started writing PHP, my instructor just created us a "web template" using PHP. This “template” ensures that the page is similar and has a consistent title, navigation, footer, etc.

(thead.php), , . , <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>

.php, , .php. XAMPP , , .

- php, , , , HTML , script .PHP. , , HTML-, . , , , , , , .