CSS Table footer with fixed position

I have put up a simple web page so you can see a live example

Very simple table with defined thead,tfoot and tbody. With style definition:

<style type="text/css" media="print">
thead {display: table-header-group; }
tfoot {display: table-footer-group; }
</style>

I set header and footer to show in every page when I print. But o开发者_JS百科n the last page, the footer was placed at the end of table, not on the bottom of page (looking in print-preview).

I tried a lot of methods: placing with fixed position, trying to set a fixed size for tbody, but none of them worked.

I need a solution that works at least in IE and Firefox (of course, if it works cross-browser it would be great)

If you need the footer at a fixed position, you either remove it from the table and place it in a fixed position at the page (altough it may not print correctly depending on the paper size!), but the most important factor here is that you need to have a fixed height for the content.

Understand that the content will push the footer to the bottom, that's why your footer isn't at the base but at the bottom of the content.

BTW, I cant't view your example it failed...