Print CSS header at each page in a multi page document

Question

Want to add a header on each page in the Printed document.

Used page-break-inside: avoid, as if some portion of the content is going to next page, it should completely go to next page.

The problem occurs when the content itself takes more than a page. The table structure is

<table class="super-table">
    <thead class="pageheader">
        <tr>
            <td>
                <?php echo $header; ?>
            </td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <?php echo $content[0]; ?>
            </td>
        </tr>
        <tr>
            <td>
                <?php echo $content[1]; ?>
            </td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>
                <?php echo $footer; ?>
            </td>
        </tr>
    </tfoot>
</table>

CSS

@media print {
    thead { 
        display: table-header-group; position: running(pageheader);
    }
    tr, td {
        page-break-inside: avoid;
    }
    @page {
        size: letter portrait;
        @top-left { content: element(pageheader); }
    }
    .super-table {
        page-break-after: always;
    }
}

The header overlaps when the content takes up more than a page. Can I have a margin set for content only in each page and not the header? Adding margin-top to @page shifts down the header also.

IMAGE: <thead> overlaps if content occupies more than one page

Answer 1

It has nothing to do with PHP but with CSS. PHP cannot manipulate with website design, it just outputs content.

You are probably looking for this: Repeat table headers in print mode

Answer 2

This can be done by the new page module of css.

But as this is not supported by browsers until now, you can have a look at paged.js.