Are there any thead limitations that make it not print on each page in Firefox?

Question

I have a table that has a <thead>, a <tfoot> and a <tbody>. It is supposed to print the thead and tfoot on each page in theory, but for some reason the thead does not if it contains certain elements together.

This works:

<thead>
    <tr>
        <td colspan="3">This works</td>
    <tr>
    <tr>
        <th colspan="2">column 1</th>
    <th>
        column 2
        </th>
</tr>
</thead>

This does not seem to work:

[edit]

<table>
    <thead>
        <tr>
            <td colspan="3">
                <h2>Header</h2>
                    <address>
                        <strong>address 1</strong> <br />
                        address 2 <br />
                        address 3 <br />
                    </address>
                 <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/b/b7/Wikipedia-logo.svg/600px-Wikipedia-logo.svg.png" alt="Logo" />
                 <h2>Another header</h2>
                 <hr />
            </td>
        </tr>
        <tr>
            <th colspan="2">column 1</th>
        <th>
            column 2
            </th>
    </tr>
    </thead>
    <tfoot>
        <tr>
            <td>This is the footer</td>
            <td>Column 2</td>
            <td>Column 3</td>
        </tr>
    </tfoot>
    <tbody>
        <?php for ($i = 0; $i < 100; $i ++): ?>
        <tr>
            <td>Col 1</td>
            <td>Col 2</td>
            <td>Col 3</td>
        </tr>
        <?php endfor; ?>
    </tbody>
</table>

[/edit]

it prints:

[page 1]
    [header]
    [body]
    [footer]

[page 2,3,4,5]
    [body]
    [footer]

Is there a reason for this not to work?

Answer 1

In your print CSS add this:

thead{
  display:table-header-group;/*repeat table headers on each page*/
}
tbody{
  display:table-row-group;
}
tfoot{
  display:table-footer-group;/*repeat table footers on each page*/
}

Adjust to suit your needs

Update

After taking your latest HTML and playing with it, I've discovered that there is a height limit to the content that repeats on each page.

I changed the THEAD to contain:

<tr><td><div style="min-height:251px;">Hello World</div></td></tr>

If I repeat the THEAD (as changed) and the TFOOT (as is)... I can use a height up to 251px only. Attempting to go to any greater height causes the THEAD section to not repeat.

I'll save the "debate" about whether this is a feature or a bug... but I think that if you have a repeating header taller than 250px, it would likely benefit from some shrinking anyway. ;-)