thead not printing on each page for IE9
Question
I have a report which is contained within a table. I use a <thead> for the table header, with the style display: table-header-group; , in an attempt to print the header on each page when printing. This works fine in most browsers, with the exception of IE 9.
Unfortunately, I cannot give the actual code as it is an order containing proprietary information. I have tried several doctypes, but cannot seem to get IE 9 to print the table head on each page when printing to a printer. Has anyone run in to this issue and know of a fix?
HTML
<table id="pt">
<thead>
<tr class="header">
<td colspan="4">
<h1>egdfgsdfg</h1>
<h3>sdfgsdfg</h3>
</td>
<td colspan="2" class="align-right">
<h2>sdfgsdfg</h2>
sdfgsdfgsdfg
</td>
</tr>
<tr class="contacts">
<td colspan="3">sdfgsdfg</td>
<td colspan="3">sdfgsdfgs</td>
</tr>
<tr class="header-info">
<td>asdfadfasdf</td>
<td>asdfadfasdf</td>
<td>asdfadfasdf</td>
<td>asdfadfasdf</td>
<td>asdfadfasdf</td>
<td>asdfadfasdf</td>
</tr>
<tr class="column-headers">
<td>asdfadfasdf</td>
<td>asdfadfasdf</td>
<td>asdfadfasdf</td>
<td>asdfadfasdf</td>
<td>asdfadfasdf</td>
<td>asdfadfasdf</td>
</tr>
</thead>
<tbody>
<tr>
<td>asdfadfasdf</td>
<td>asdfadfasdf</td>
<td>asdfadfasdf</td>
<td>asdfadfasdf</td>
<td>asdfadfasdf</td>
<td>asdfadfasdf</td>
</tr>
</tbody>
</table>
CSS:
#pt thead {
display: table-header-group;
}
5 answers
solution1
1 2013-06-26 23:51:48
Try using the 'compatibility' setting via the dev tools of IE and see if it works. You may have to use the META tag to force that if in fact setting that works. Just to see if it is some css somewhere or an actual IE 9 thing.
solution2
0
Try specifying all the CSS attributes yourself
<style type="text/css" media="print,screen" >
th {
font-family:Arial;
color:black;
background-color:lightgrey;
}
thead {
display:table-header-group;
}
tbody {
display:table-row-group;
}
tfoot {
display: table-footer-group;
}
</style>
<table border="1" cellpadding="2" cellspacing="0">
<thead>
<tr>
<th>ID</th>
<th>First Name</th>
<th>Last Name</th>
</tr>
</thead>
<tbody>
<tr>
<td>#i#</td>
<td>First Name #i#</td>
<td>Last Name #i#</td>
</tr>
</tbody>
</table>
solution3
0 2013-06-29 16:54:31
"If a table contains multiple elements with 'display: table-header-group', only the first is rendered as a header; the others are treated as if they had 'display: table-row-group'" - W3.org
So, I hope you don't have multiple tables with that attribute on the same page.
Like it has been suggested by Kelly, it would be a good idea to check if compatibility is causing the issue. Use this in the head section of your document and see if it helps:
<meta http-equiv="X-UA-Compatible" content="IE=edge">
solution4
0 2013-07-02 07:16:23
What about try to change all <td> tags within <thead> to <th> tags ?
Like that, and see?
<table id="pt" border="1">
<thead>
<tr class="header">
<th colspan="4">
<h1>egdfgsdfg</h1>
<h3>sdfgsdfg</h3>
</th>
<th colspan="2" class="align-right">
<h2>sdfgsdfg</h2>
sdfgsdfgsdfg
</th>
</tr>
<tr class="contacts">
<th colspan="3">sdfgsdfg</th>
<th colspan="3">sdfgsdfgs</th>
</tr>
<tr class="header-info">
<th>asdfadfasdf</th>
<th>asdfadfasdf</th>
<th>asdfadfasdf</th>
<th>asdfadfasdf</th>
<th>asdfadfasdf</th>
<th>asdfadfasdf</th>
</tr>
<tr class="column-headers">
<th>asdfadfasdf</th>
<th>asdfadfasdf</th>
<th>asdfadfasdf</th>
<th>asdfadfasdf</th>
<th>asdfadfasdf</th>
<th>asdfadfasdf</th>
</tr>
</thead>
<tbody>
<tr>
<td>asdfadfasdf</td>
<td>asdfadfasdf</td>
<td>asdfadfasdf</td>
<td>asdfadfasdf</td>
<td>asdfadfasdf</td>
<td>asdfadfasdf</td>
</tr>
</tbody>
</table>
solution5
0 2013-07-03 20:03:33
The problem lies in markup or styles outside those posted with the question, as Jared Farrish implied in his comments. The following html contains the markup and styles as posted, but with the body row repeated enough times to create two printed pages. IE9 displays the headers on both pages of the print preview using all Browser Mode/Document Mode combinations I tested.
Browser Mode/Document Modes tested:
- Internet Explorer 9/Quirks
- Internet Explorer 9/Internet Explorer standards
- Internet Explorer 9 Compatibility Mode/Quirks
- Internet Explorer 9 Compatibility Mode/Internet Explorer standards
IE9 print preview:
IE9 version details:
Full code:
<html>
<head>
<style>
#pt thead {
display: table-header-group;
}
</style>
<body>
<table id="pt">
<thead>
<tr class="header">
<td colspan="4">
<h1>egdfgsdfg</h1>
<h3>sdfgsdfg</h3>
</td>
<td colspan="2" class="align-right">
<h2>sdfgsdfg</h2>
sdfgsdfgsdfg
</td>
</tr>
<tr class="contacts">
<td colspan="3">sdfgsdfg</td>
<td colspan="3">sdfgsdfgs</td>
</tr>
<tr class="header-info">
<td>asdfadfasdf</td>
<td>asdfadfasdf</td>
<td>asdfadfasdf</td>
<td>asdfadfasdf</td>
<td>asdfadfasdf</td>
<td>asdfadfasdf</td>
</tr>
<tr class="column-headers">
<td>asdfadfasdf</td>
<td>asdfadfasdf</td>
<td>asdfadfasdf</td>
<td>asdfadfasdf</td>
<td>asdfadfasdf</td>
<td>asdfadfasdf</td>
</tr>
</thead>
<tbody>
<tr>
<td>asdfadfasdf</td>
<td>asdfadfasdf</td>
<td>asdfadfasdf</td>
<td>asdfadfasdf</td>
<td>asdfadfasdf</td>
<td>asdfadfasdf</td>
</tr>
<tr>
<td>asdfadfasdf</td>
<td>asdfadfasdf</td>
<td>asdfadfasdf</td>
<td>asdfadfasdf</td>
<td>asdfadfasdf</td>
<td>asdfadfasdf</td>
</tr>
<tr>
<td>asdfadfasdf</td>
<td>asdfadfasdf</td>
<td>asdfadfasdf</td>
<td>asdfadfasdf</td>
<td>asdfadfasdf</td>
<td>asdfadfasdf</td>
</tr>
<tr>
<td>asdfadfasdf</td>
<td>asdfadfasdf</td>
<td>asdfadfasdf</td>
<td>asdfadfasdf</td>
<td>asdfadfasdf</td>
<td>asdfadfasdf</td>
</tr>
<tr>
<td>asdfadfasdf</td>
<td>asdfadfasdf</td>
<td>asdfadfasdf</td>
<td>asdfadfasdf</td>
<td>asdfadfasdf</td>
<td>asdfadfasdf</td>
</tr>
<tr>
<td>asdfadfasdf</td>
<td>asdfadfasdf</td>
<td>asdfadfasdf</td>
<td>asdfadfasdf</td>
<td>asdfadfasdf</td>
<td>asdfadfasdf</td>
</tr>
<tr>
<td>asdfadfasdf</td>
<td>asdfadfasdf</td>
<td>asdfadfasdf</td>
<td>asdfadfasdf</td>
<td>asdfadfasdf</td>
<td>asdfadfasdf</td>
</tr>
<tr>
<td>asdfadfasdf</td>
<td>asdfadfasdf</td>
<td>asdfadfasdf</td>
<td>asdfadfasdf</td>
<td>asdfadfasdf</td>
<td>asdfadfasdf</td>
</tr>
<tr>
<td>asdfadfasdf</td>
<td>asdfadfasdf</td>
<td>asdfadfasdf</td>
<td>asdfadfasdf</td>
<td>asdfadfasdf</td>
<td>asdfadfasdf</td>
</tr>
<tr>
<td>asdfadfasdf</td>
<td>asdfadfasdf</td>
<td>asdfadfasdf</td>
<td>asdfadfasdf</td>
<td>asdfadfasdf</td>
<td>asdfadfasdf</td>
</tr>
<tr>
<td>asdfadfasdf</td>
<td>asdfadfasdf</td>
<td>asdfadfasdf</td>
<td>asdfadfasdf</td>
<td>asdfadfasdf</td>
<td>asdfadfasdf</td>
</tr>
<tr>
<td>asdfadfasdf</td>
<td>asdfadfasdf</td>
<td>asdfadfasdf</td>
<td>asdfadfasdf</td>
<td>asdfadfasdf</td>
<td>asdfadfasdf</td>
</tr>
<tr>
<td>asdfadfasdf</td>
<td>asdfadfasdf</td>
<td>asdfadfasdf</td>
<td>asdfadfasdf</td>
<td>asdfadfasdf</td>
<td>asdfadfasdf</td>
</tr>
<tr>
<td>asdfadfasdf</td>
<td>asdfadfasdf</td>
<td>asdfadfasdf</td>
<td>asdfadfasdf</td>
<td>asdfadfasdf</td>
<td>asdfadfasdf</td>
</tr>
<tr>
<td>asdfadfasdf</td>
<td>asdfadfasdf</td>
<td>asdfadfasdf</td>
<td>asdfadfasdf</td>
<td>asdfadfasdf</td>
<td>asdfadfasdf</td>
</tr>
<tr>
<td>asdfadfasdf</td>
<td>asdfadfasdf</td>
<td>asdfadfasdf</td>
<td>asdfadfasdf</td>
<td>asdfadfasdf</td>
<td>asdfadfasdf</td>
</tr>
<tr>
<td>asdfadfasdf</td>
<td>asdfadfasdf</td>
<td>asdfadfasdf</td>
<td>asdfadfasdf</td>
<td>asdfadfasdf</td>
<td>asdfadfasdf</td>
</tr>
<tr>
<td>asdfadfasdf</td>
<td>asdfadfasdf</td>
<td>asdfadfasdf</td>
<td>asdfadfasdf</td>
<td>asdfadfasdf</td>
<td>asdfadfasdf</td>
</tr>
<tr>
<td>asdfadfasdf</td>
<td>asdfadfasdf</td>
<td>asdfadfasdf</td>
<td>asdfadfasdf</td>
<td>asdfadfasdf</td>
<td>asdfadfasdf</td>
</tr>
<tr>
<td>asdfadfasdf</td>
<td>asdfadfasdf</td>
<td>asdfadfasdf</td>
<td>asdfadfasdf</td>
<td>asdfadfasdf</td>
<td>asdfadfasdf</td>
</tr>
<tr>
<td>asdfadfasdf</td>
<td>asdfadfasdf</td>
<td>asdfadfasdf</td>
<td>asdfadfasdf</td>
<td>asdfadfasdf</td>
<td>asdfadfasdf</td>
</tr>
<tr>
<td>asdfadfasdf</td>
<td>asdfadfasdf</td>
<td>asdfadfasdf</td>
<td>asdfadfasdf</td>
<td>asdfadfasdf</td>
<td>asdfadfasdf</td>
</tr>
<tr>
<td>asdfadfasdf</td>
<td>asdfadfasdf</td>
<td>asdfadfasdf</td>
<td>asdfadfasdf</td>
<td>asdfadfasdf</td>
<td>asdfadfasdf</td>
</tr>
<tr>
<td>asdfadfasdf</td>
<td>asdfadfasdf</td>
<td>asdfadfasdf</td>
<td>asdfadfasdf</td>
<td>asdfadfasdf</td>
<td>asdfadfasdf</td>
</tr>
<tr>
<td>asdfadfasdf</td>
<td>asdfadfasdf</td>
<td>asdfadfasdf</td>
<td>asdfadfasdf</td>
<td>asdfadfasdf</td>
<td>asdfadfasdf</td>
</tr>
<tr>
<td>asdfadfasdf</td>
<td>asdfadfasdf</td>
<td>asdfadfasdf</td>
<td>asdfadfasdf</td>
<td>asdfadfasdf</td>
<td>asdfadfasdf</td>
</tr>
<tr>
<td>asdfadfasdf</td>
<td>asdfadfasdf</td>
<td>asdfadfasdf</td>
<td>asdfadfasdf</td>
<td>asdfadfasdf</td>
<td>asdfadfasdf</td>
</tr>
<tr>
<td>asdfadfasdf</td>
<td>asdfadfasdf</td>
<td>asdfadfasdf</td>
<td>asdfadfasdf</td>
<td>asdfadfasdf</td>
<td>asdfadfasdf</td>
</tr>
<tr>
<td>asdfadfasdf</td>
<td>asdfadfasdf</td>
<td>asdfadfasdf</td>
<td>asdfadfasdf</td>
<td>asdfadfasdf</td>
<td>asdfadfasdf</td>
</tr>
<tr>
<td>asdfadfasdf</td>
<td>asdfadfasdf</td>
<td>asdfadfasdf</td>
<td>asdfadfasdf</td>
<td>asdfadfasdf</td>
<td>asdfadfasdf</td>
</tr>
<tr>
<td>asdfadfasdf</td>
<td>asdfadfasdf</td>
<td>asdfadfasdf</td>
<td>asdfadfasdf</td>
<td>asdfadfasdf</td>
<td>asdfadfasdf</td>
</tr>
<tr>
<td>asdfadfasdf</td>
<td>asdfadfasdf</td>
<td>asdfadfasdf</td>
<td>asdfadfasdf</td>
<td>asdfadfasdf</td>
<td>asdfadfasdf</td>
</tr>
<tr>
<td>asdfadfasdf</td>
<td>asdfadfasdf</td>
<td>asdfadfasdf</td>
<td>asdfadfasdf</td>
<td>asdfadfasdf</td>
<td>asdfadfasdf</td>
</tr>
<tr>
<td>asdfadfasdf</td>
<td>asdfadfasdf</td>
<td>asdfadfasdf</td>
<td>asdfadfasdf</td>
<td>asdfadfasdf</td>
<td>asdfadfasdf</td>
</tr>
<tr>
<td>asdfadfasdf</td>
<td>asdfadfasdf</td>
<td>asdfadfasdf</td>
<td>asdfadfasdf</td>
<td>asdfadfasdf</td>
<td>asdfadfasdf</td>
</tr>
<tr>
<td>asdfadfasdf</td>
<td>asdfadfasdf</td>
<td>asdfadfasdf</td>
<td>asdfadfasdf</td>
<td>asdfadfasdf</td>
<td>asdfadfasdf</td>
</tr>
<tr>
<td>asdfadfasdf</td>
<td>asdfadfasdf</td>
<td>asdfadfasdf</td>
<td>asdfadfasdf</td>
<td>asdfadfasdf</td>
<td>asdfadfasdf</td>
</tr>
<tr>
<td>asdfadfasdf</td>
<td>asdfadfasdf</td>
<td>asdfadfasdf</td>
<td>asdfadfasdf</td>
<td>asdfadfasdf</td>
<td>asdfadfasdf</td>
</tr>
<tr>
<td>asdfadfasdf</td>
<td>asdfadfasdf</td>
<td>asdfadfasdf</td>
<td>asdfadfasdf</td>
<td>asdfadfasdf</td>
<td>asdfadfasdf</td>
</tr>
</tbody>
</table>
</body>
</html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Page aligned to center IE9
how to print thead of the table on each print page?
Repeat thead on each page via htmldoc
Website not displaying a page on IE9
Repeat THEAD on each PDF page, using convertApi
How to add “continued” in repeated <thead> tags when printing an HTML page?
Prevent page break between thead and tbody when printing
HTML thead border is partially shown on previous page when printing with Chrome
Remove thead tags from second page on when printing screen
IE9 dynamic-page JS issue
Related Tags