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?

Can you post and example of how it does not work? What is happening? — Dustin Laine, Mar 22 '10 at 15:52
I'm afraid that browsers (even Firefox) do not implement correctly *all* the HTML rules regarding tables. — Álvaro González, Mar 25 '10 at 15:39

scunliffe · Accepted Answer · 2010-03-25T15:09:41.787

6

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. ;-)

edited Mar 25 '10 at 15:09

answered Mar 22 '10 at 16:49

scunliffe

62,582
25
126
161

I have the styles for thead and tfoot, and they work fine in IE 7, but Firefox is still having problems. – SeanJA Mar 22 '10 at 17:12
did you define your HTML correctly? e.g. [Table][THead/][TFoot/][Tbody/][/Table] (in that order e.g. foot before body) – scunliffe Mar 22 '10 at 19:08
[table][thead][tfoot][tbody][/table] Yep, which is why this perplexes me. – SeanJA Mar 23 '10 at 12:46
what is your full HTML markup? I just tried a quick mockup with your HTML above and it worked just fine in Firefox. Do you have a URL or larger sample? – scunliffe Mar 23 '10 at 13:57
I have updated it with an example that appears to reproduce it on my computer. Maybe the header can only be so big in Firefox? – SeanJA Mar 25 '10 at 11:36
I realise that a 250px header is a bit much, but... stupid company logos. 251 px seems so arbitrary... – SeanJA Mar 25 '10 at 23:13
I guess in your CSS for `media="print"`, you could do: `img#logo{ width:50%;height:50%;}` (adjust to whatever px dims you want/need) to print the logo to the same proportions, just smaller. Just add `id="logo"` or some other hook for CSS styling to the image. – scunliffe Mar 26 '10 at 10:44
WebKit has an open issue for this since 2008 https://bugs.webkit.org/show_bug.cgi?id=17205 – mspisars Apr 09 '14 at 14:59
This is exactly what I needed for a problem I was having in Firefox in which the `thead` would show up on each page, messing up some styles in the `tbody`. I set the `thead` to `display: table-row-group;` in the print styles, and voila! Thanks! – HartleySan Apr 30 '15 at 19:45
Hi, do you have solution for repeating header with header taller than 250px for now? – 120196 Sep 19 '16 at 06:28
@scunliffe Any luck with the height issue? Anyways to resolve that? – Sebastian Feb 10 '21 at 15:09
@JibinMathew not that I've seen. Although HTML can do a lot, the correct answer when print formatting really matters is... generate a PDF... there's been a lot of great tools published in the last (gulp!) 11 years... I'd peek into that if formatting is really important. – scunliffe Feb 11 '21 at 04:35

score 1 · Answer 2 · edited May 23 '17 at 11:48

1

If the limitation on thead height is a problem, then use css coding to place every header label on top of the page.

Please refer to the following link for more information: How to use HTML to print header and footer on every printed page of a document?

edited May 23 '17 at 11:48

Community

1
1

answered Apr 12 '12 at 04:15

Kelvin Tan

21
3

2

Hi, do you have solution for repeating header with header taller than 250px for now? – 120196 Sep 19 '16 at 06:39
2

same issue @120196, its Mar 2018 still no answers – Sundara Prabu Mar 15 '18 at 08:15

score 0 · Answer 3 · answered Apr 11 '22 at 12:53

I experienced this 250px height limit in chrome also, as a workaround I have divided my header to 2 parts in order to get away with the height limit.

sudo

<table>
 <thead>
    <div style="height:200px;"> header part 1</div>
 <tbody>
    <table>
      <thead>
         <div style="height:200px;"> header part 2</div>
 ....

score -1 · Answer 4 · answered Mar 15 '18 at 13:06

-1

Adding on to @scunliffe 's answer . I have added this to my css, so it squeezes my thead to this size whenever possible and repeats it in all pages now in IE11 and Chrome 62

  thead {
        display: table-header-group;
       max-height:250px;
    }

answered Mar 15 '18 at 13:06

Sundara Prabu

2,361
1
21
20

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

4 Answers4