HTML Table headers/footers printing and IE

This is a relatively old issue to some other developers but I have never needed to use it this way before so as a result I’ve never had the issue until now…

According to the w3c (the guys setting standards for things like html etc.) there are 2 ‘tags’ that could help with when you print large tables and want – say the column names and/or a footer to repeat on each page. The thead and tfoot tags ‘could’ be used to specify a row that will be used for repeating.

To quote the w3c: “When long tables are printed, the table head and foot information may be repeated on each page that contains table data.”

Yes, it does not state that it is a must that the browser must implement it but really, Firefox has been doing it for years!

Look at the following sample and test it in Firefox, IE9 (and even Chrome if you like) :

<table width=”100%” border=”1″>
<thead>
<tr>
<th>Name</th>
<th>Surname</th>
<th>Age</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan=”3″>footer</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Piet 1</td>
<td>Pompies</td>
<td>21</td>
</tr>
<tr>
<td>Piet 2</td>
<td>Pompies</td>
<td>21</td>
</tr>

… repeat it, say 50 times…

</tbody>
</table>

The rows containing the header (Name, Surname, Age) and the footer should repeat on each page. This works fine ‘as is’ in Firefox but IE9 (and even Chrome!) does not display it correctly. This is really shameful for a browser that is (now) suppose to support (most) of the web standards – and its not like it is some obscure functionality that no-one ever use. Mozilla (Firefox) has been doing it rights for many year so why can IE not get something as simple as this right.

Fortunately there is a ‘cheat’ to get IE to render it better – but it is not perfect and seems to display empty rows or even not display the last row on a page at all. The trick is to specify some CSS to correct the behaviour:

<STYLE type=”text/css”>
THEAD { display: table-header-group; }
TFOOT { display: table-footer-group; }
</STYLE>

Hopefully someone on the IE team will read/hear about this and fix it! 😉

Leave a Reply

%d bloggers like this: