Menu
my problem is, that I have two different html files with a table containing theader, tfooter and tbody.
the first one is my own creation for test reasons and it looks like this:
<html>
<head>
<title>The Invoice</title>
<style type="text/css">
table.invoice { background-color: #dddddd; font-family: sans-serif; }
td, th { background-color: #ffffff; padding: 5pt; }
td.unit { text-align: right; }
td.price { text-align: right; }
thead { display: table-header-group; }
tfoot th { text-align: right; }
</style>
</head>
<body>
<div style="width:auto !important; overflow:hidden; position:relative">
<table class="invoice" cellspacing="1" cellpadding="0">
<thead>
<th>Unit</th>
<th>Description</th>
<th>Price</th>
</thead>
<tfoot>
<tr>
<th colspan="2">Sum</th>
<td class="price">1.230,32 EUR</td>
</tr>
</tfoot>
<tbody>
<tr><td>1</td><td>Excel</td><td >150,00 EUR</td></tr>
<tr><td>2</td><td>Document</td><td>150,00 EUR</td></tr>
... and so on ...
</tbody>
</table>
</div>
</body>
</html>
whenever I try the print preview on IE9 it shows the tfoot on the last page (page 5 in my case) which shows the overall sum of the body content price column. when I try the same in Mozilla Firefox 11.0 it shows the tfoot with the overall sum on every page which I don't want of course.
the main reason I'm asking is because I have a FreeAgent html dom where I want to print out some Invoice. With that html file even IE9 shows the tfoot on every page, which, again!, I don't want.
I played around with
@media print { tfoot { display: table-footer-group;
position: absolute;
bottom: 0; }}
there it shows the footer just once, but on the first page at the bottom left all accross the rest of my text ...
ideas or solutions much appreciated! :)
701
Try this CSS in your print stylesheet, it will make the tfoot act as another row yet keeping the proper syntax that something like Datatables.net needs.
table tfoot{display:table-row-group;}
The tfoot is actually supposed to "always be visible at the bottom" (or something along those lines), so it makes sense for Firefox to print the footer at the bottom of the table on every page.
In particular this is useful for if you have table header cells to name columns, or are using the footer as a label or repeated headers.
You should probably have your sum as just another row on the end of the table.
29
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
