Printing, custom footer on every page

Hi,
We have a Windows desktop application, where we use HTML for printing reports, using whichever IE is installed on the client machine. Currently, it’s IE6, IE7 and IE8. Changing to another browser is unfortunatly not an option.

There is often a request from our clients to have a custom footer on every printed page with their company information, and a small logo. The way we solve it right now is quite an ugly hack, something like this:

<table>
	<thead>
		<tr>
			<td>Header</td>
		</tr>
	</thead>
	<tfoot>
		<tr>
			<td>Footer</td>
		</tr>
	</tfoot>
	<tbody>
		<tr>
			<td>Body</td>
		</tr>
		<tr>
			<td style="height:1500px;">&nbsp;</td>
		</tr>
	</tbody>
</table>

That is, wrap all content in the report in a table with a tfoot, and have a very tall <td> in the bottom of <tbody> to push down <tfoot> to the bottom of the page. It’s a hack, and it only works in quirks mode in IE, but at least it works.

The problem is when that wrapping table needs tables inside it, with their own <thead> and <tfoot>, that needs to be repeated if the table laps over multiple pages. It simply doesn’t work. What I’ve done in these situations is to tell the client that for a report that needs multiple tables, a footer on the bottom of every page isn’t possible. And then removed the wrapping table, forced IE out of quirks mode, and everything works quite nicely.

But is there any way to get a custom footer at the bottom of every printed page? Every alternative is interesting to me, even if it involves changing registry keys, etc. The dream is to make it work for IE6 as well, but I realize that the odds for that are pretty slim.

First time I listen that why we use tfoot, tbody and thead but one thing I want to know that after using these tags there is no need to add width, height in table/td/tr , it will auto adjust the space or width. Can describe that or any help full link can you provide it.

I found a pretty good solution while digging through older threads here:

It uses position:fixed, so it doesn’t work in IE6, but it’s a step in the right direction at least. If anyone has any other suggestions, they’re more than welcome.

The position:fixed works quite well, except that content is sometimes placed under the footer, and I can’t seem to work around that. I’ve tried setting @page {margin-bottom:50px;}, and #footer {bottom: -50px;}, but that cuts off the footer, and padding in @page doesn’t seem to work. Any ideas?

Here’s an ugly hack that works, at least right now; wrap all content inside a table, and place a tfoot in that table with a td with the same height as the footer. That tfoot td will act as a spacer, preventing the content to be placed under the footer.

Earlier I wrote that I couldn’t use a wrapping table when not in quirks mode, but the issue with that was that the tfoot was placed directly below tbody, when I wanted it at the bottom of the page. But since the tfoot I use now is empty, it doesn’t matter where it’s placed.

One problem with this though, is that if the content is exactly two pages, the tfoot will be pushed to a third page, which will be empty (except for the real footer) since the tfoot is nothing but a spacer.

Sorry, this is not a very helpful reply, but why not suggest they use letterhead! (That is, print the html onto pages with the footer pre-printed on them.)

The position:fixed works quite well, except that content is sometimes placed under the footer… Any ideas?

Perhaps you could force a page break on certain elements, like so:

.some-element     { page-break-after:always; }

Maybe worth a try.

Don’t create the spacer with a new td but create it with padding bottom on the cell that holds the content. In that way they will always stay together.

This works in IE7 (and IE8 gets a normal table footer which it automatically places on each page anyway (except the last)).


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
    height:100&#37;;
    margin:0;
    padding:0;
}
table {
    height:100%;
    width:100%;
    border-collapse:collapse
}
table td {
    vertical-align:top
}
.footer {
    position:fixed;
    height:100px;
    background:red;
    bottom:0;
    width:100%;
}
tbody td {
    padding-bottom:100px
}
</style>
<!--[if gte IE 8]>
<style type="text/css">
.footer{position:static}
</style>
<![endif]-->
</head>
<body>
</body>
<table cellspacing="0" cellpadding="0">
    <thead>
        <tr>
            <td>Header</td>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <td><div class="footer">Footer</div></td>
        </tr>
    </tfoot>
    <tbody>
        <tr>
            <td><p>content 1</p>
                <p>content 2</p>
                <p>content 3</p>
                <p>content 4</p>
                <p>content 5</p>
                <p>content 6</p>
                <p>content 7</p>
                <p>content 8</p>
                <p>content 9</p>
                <p>content 10</p>
                <p>content 1</p>
                <p>content 2</p>
                <p>content 3</p>
                <p>content 4</p>
                <p>content 5</p>
                <p>content 6</p>
                <p>content 7</p>
                <p>content 8</p>
                <p>content 9</p>
                <p>content 10</p>
                <p>content 1</p>
                <p>content 2</p>
                <p>content 3</p>
                <p>content 4</p>
                <p>content 5</p>
                <p>content 6</p>
                <p>content 7</p>
                <p>content 8</p>
                <p>content 9</p>
                <p>content 10</p>
                <p>content 1</p>
                <p>content 2</p>
                <p>content 3</p>
                <p>content 4</p>
                <p>content 5</p>
                <p>content 6</p>
                <p>content 7</p>
                <p>content 8</p>
                <p>content 9</p>
                <p>content 10</p>
                <p>content 1</p>
                <p>content 2</p>
                <p>content 3</p>
                <p>content 4</p>
                <p>content 5</p>
                <p>content 6</p>
                <p>content 7</p>
                <p>content 8</p>
                <p>content 9</p>
                <p>content 10</p>
                <p>content - last</p></td>
        </tr>
    </tbody>
</table>
<body>
</body>
</html>



@Ralph, not to discourage your comment but the page-break family of properties only work in Opera (perhaps the newest FF if your lucky. I haven’t seen what FF3.6 is capable of though :))

@Paul: Having the footer in the middle instead of at the bottom on the last page in IE8 is going to give me more complaints from the customers than a blank page at the end, so I’ll have to go with that, at least for now.

@Ryan: The page-break properties work in IE as well, even IE6.