All geek questions in one place

Print HTML report with header and footer on all pages - Firefox

I tried several methods, but none of them work properly. I have an html report and I need to print a report with a header and footer on each page. I need this to work in firefox!

Solution 1:

<html> <head> <title></title> <style type="text/css"> @media print { #footer { display: block; position: fixed; bottom: 0; } } </style> </head> <body> <table border="0" width="100%" cellspacing="0" cellpadding="0"> <thead> <tr> <th style="width:100%"> header content </th> </tr> </thead> <tfoot> <tr> <td width="100%"><table width="100%" border="0"> <tr> <td colspan="4"><br> &nbsp;</td> </tr> </table> </tfoot> <tbody> <tr> <td width="100%"> main content </td> </tr> </tbody> </table> <table id="footer" width="100%"> <tr> <td width="100%"> footer content </td> </tr> </table> </body> </html>

Problems with Solution 1: The main content overlaps the footer.

Solution 2:

 <html> <head> <title></title> <style type="text/css"> @media print { thead { display: table-header-group; } tfoot { display: table-footer-group; } } @media screen { thead { display: block; } tfoot { display: block; } } </style> </head> <body> <table> <thead> <tr> <td>header content</td> </tr> </thead> <tbody> <tr> <td> main content </td> </tr> </tbody> <tfoot> <tr> <td>footer content</td> </tr> </tfoot> </table> </body> </html>

Problems with Solution 2: The footer stays just below the main content, and not always at the bottom of the page, as I wish.

Any help or other solution?

thanks

+4
source share
2 answers

Ok, I found a solution for my problem. I will put it here for those who have the same problem. In my first example, we just need to assign the tfoot height that we want for the footer.

For instance:

 <tfoot> <tr> <td width="100%"> <table width="100%" border="0"> <tr> <td colspan="4"> <br>&nbsp; </td> </tr> <tr> <td colspan="4"> <br>&nbsp; </td> </tr> <tr> <td colspan="4"> <br>&nbsp; </td> </tr> </table> </tfoot>

Or assign one class and place the desired height.

0
source

If I understand you correctly, try: footer heights up to 50px (100px, 200px ... whatever) and add to the main edge of the content: 50px (footer heights)

This should prevent the footer from exceeding the content.

0
source

Source: https://habr.com/ru/post/1445034/

More articles:


All Articles