在所有页面上打印带有页眉和页脚的HTML报告 - Firefox

我尝试了几种方法，但似乎都没有正常工作。我有一个html报告，我需要在每个页面中打印带有页眉和页脚的报告。我需要在Firefox中工作！在所有页面上打印带有页眉和页脚的HTML报告 - Firefox

解决方案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>

解决方案1点的问题：主要内容覆盖在页脚。

解决方案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>

解决2个问题：我希望页脚保持略低于主要内容，而不是总是在页面的底部。

任何帮助或其他解决方案？

感谢

来源

2012-11-09 dsbml

尝试：http://csslayoutgenerator.com/ – MatthewK

适用于网络，但对于打印，我仍然有同样的问题。 – dsbml

好吧，我找到了解决我的问题。我会在这里为那些有同样问题的人。在我的第一个示例中，我们只需将t foot分配给页脚所需的高度。

例如：

<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>

或指定一个类，把你想要的高度。

来源

2012-11-12 17:04:06 dsbml

您设置示例中的宽度，但说你设置高度..？你能否详细阐述解决方案？ – bonitzenator

如果我正确理解你，试试：组页脚高度为50像素（100像素，200像素...什么）并加入到主要内容边距：50像素（页脚高度）

这必须排除覆盖页脚的内容。

来源

2012-11-12 12:28:21 Extazystas

对不起，在这种情况下打印与位置固定页脚，此方法不起作用.. – dsbml

在所有页面上打印带有页眉和页脚的HTML报告 - Firefox

回答

相关问题