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?
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. ;-)
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?
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>
....
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;
}
精彩评论