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>

Recommended Answers

All 5 Replies

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

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.