Question

I have a html table with the following structure:

<table>
    <thead>
        <tr><th>ABC Ltd.</th><tr>
    </thead>
    <tbody>
    <table>
        <thead><tr><th>Name</th></tr></thead>
        <tbody>
            <tr><td>ola</td></tr>
            <tr><td>ola</td></tr>
            <tr><td>ola</td></tr>
            <tr><td>ola</td></tr>
            ... 500 more rows ...
        </tbody>
    </table>
    </tbody>
</table>

I have to make sure that ABC Ltd. and Name appear on each page. How do I do that?

I tried using:

@media print
{
    thead { display:table-header-group }
    tfoot { display:table-footer-group }
}

Answer 1

There’s probably a better answer out there.

But, when I’ve needed to print something different from what is being display (removing sections of the site, or not paging data), I’ve used this method:

1. Have a “print” button/link.
2. When clicked, it generates an iFrame with exactly what you want to print.
3. Print the iframe (still via javascript)
4. Remove the iframe

Worked like a charm.

You can use that to create printing pages, breaking up the table into a table on each page. The first row on each one can be your headers.

Printing so much stuff seems like a waste of paper though :-/