在所有页面上打印带有页眉和页脚的 HTML 报告 - Firefox
Posted
技术标签:
【中文标题】在所有页面上打印带有页眉和页脚的 HTML 报告 - Firefox【英文标题】：Print HTML report with header and footer on all pages - Firefox 【发布时间】：2012-10-29 16:59:35 【问题描述】：我尝试了几种方法，但似乎都没有正常工作。我有一个 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" cellspacing="0" cellpadding="0">
<thead>
<tr>
<th style="width:100%"> header content </th>
</tr>
</thead>
<tfoot>
<tr>
<td ><table border="0">
<tr>
<td colspan="4"><br>
</td>
</tr>
</table>
</tfoot>
<tbody>
<tr>
<td > main content </td>
</tr>
</tbody>
</table>
<table id="footer" >
<tr>
<td > 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 问题：页脚位于主要内容的正下方，并不总是像我希望的那样位于页面底部。
任何帮助或其他解决方案？
谢谢
【问题讨论】：
试试：csslayoutgenerator.com 适用于网络，但对于打印我仍然有同样的问题。 【参考方案1】：如果我理解正确，请尝试： 将页脚高度设置为 50 像素（100 像素、200 像素……任何东西） 并添加到主要内容 margin-bottom:50px （页脚高度）
这必须排除带有页脚的重叠内容。
【讨论】：
对不起，在这种情况下，对于带有位置固定页脚的打印，此方法不起作用..【参考方案2】：好的，我找到了解决问题的方法。我会把它放在这里给那些有同样问题的人。 在我的第一个示例中，我们只需为 tfoot 分配我们想要的页脚高度。
例如：
<tfoot>
<tr>
<td >
<table border="0">
<tr>
<td colspan="4">
<br>
</td>
</tr>
<tr>
<td colspan="4">
<br>
</td>
</tr>
<tr>
<td colspan="4">
<br>
</td>
</tr>
</table>
</tfoot>
或者分配一个班级，然后放你想要的高度。
【讨论】：
您在示例中设置了宽度，但说您设置了高度..？你能详细说明一下解决方案吗？以上是关于在所有页面上打印带有页眉和页脚的 HTML 报告 - Firefox的主要内容，如果未能解决你的问题，请参考以下文章