Printing Nested Table spanning multiple pages in HTML

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 }
}

The example code above should work in Internet Explorer and Firefox. For Chrome and Safari, see my solution [here](http://stackoverflow.com/questions/7211229/having-google-chrome-repeat-table-headers-on-printed-pages/25737442#25737442). I've yet to find a solution that works in Opera. — DoctorDestructo, Sep 10 '14 at 22:04

score 0 · Accepted Answer · answered Nov 01 '11 at 08:09

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:

Have a "print" button/link.
When clicked, it generates an iFrame with exactly what you want to print.
Print the iframe (still via javascript)
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 :-/

Printing Nested Table spanning multiple pages in HTML

1 Answers1