Hi,
I have 3 tables and want 3rd table to appear at the bottom of the page when it is printed off because it will be footer.How can i do it?
Thanks
<table>
<tr>
<td>Table 1</td>
</tr>
</table>
<br />
<table>
<tr>
<td>Table 2</td>
</tr>
</table>
<br />
<table>
<tr>
<td>Table 3</td>
</tr>
</table>
Velo,
That's pretty easy because these days we have CSS @media rules.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled</title>
<STYLE type="text/css">
.printOnly { display:none; }
@media print {
.printOnly { display:block; }
}
</style>
</head>
<body>
<table>
<tr>
<td>Table 1</td>
</tr>
</table>
<br />
<table>
<tr>
<td>Table 2</td>
</tr>
</table>
<br />
<table class="printOnly">
<tr>
<td>Table 3</td>
</tr>
</table>
</body>
</html>Airshow
Unfortunatelly, it still doesn't print at the bottom of the A4 paper.
It should be like this on A4 paper.
------------------------------------------------
- Table 1 -
- Table 2 -
- -
- -
- -
- -
- -
- Table 3 -
------------------------------------------------
Aha, I see. I'm not sure that's possible Velo, but I'll have a look.
Airshow
Here's a solution modified from one posted in 2002 on another forum. I've not tried it but it looks like it might work.
<style>
div#print-footer {display: none;}
@media print {
div#print-footer {display:block; position:fixed; bottom:0;}
}
</style>
<body>
.......
<div id="print-footer">blah blah blah</div>
</body>Airshow
Mmm, further thoughts. IE6 and less will not play ball with position:fixed . I haven't the time to get into it too deeply but this article appears to offer a way ahead if not an actual solution.
Good luck
Airshow
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.