在最后一页的最底部打印表格页脚 [英] Print table footer at the very bottom on last page

问题描述

我正在使用一个表格在每个页面上创建一个页脚(在 Firefox 中工作，这就足够了).

JS 小提琴:https://jsfiddle.net/j9k2xzze/

(右键单击输出窗格 -> 此框架 -> 在新选项卡中打开框架.然后打印预览将正常运行)

<头><tr><td id="header"></td></tr></thead><脚><tr><td colspan="0" id="footer"><img src="footer.jpg"/></td></tr></tfoot><tr><td id="内容"><?php echo $html;?></td></tr></tbody>

但在最后一页，表格页脚直接显示在文本下方.如果文本比最后一页短，则页脚会粘在它上面.

我喜欢页脚位于最后一页的最底部.不幸的是，@page 扩展在 Firefox 中不起作用，或者我做错了:

@page:last {#页脚{位置:绝对；底部:0；}}

解决方案

如果您只支持 Firefox，这实际上非常简单.(跳到编辑查看同样有效的技术在 IE 中，但功能较少.当我发布这个答案时，Chrome 和其他 webkit 浏览器不支持重复页脚，所以我没有测试它们).

您所要做的就是在内容的末尾添加一个大的底部边距.确切的大小无关紧要，但它必须足够大以保证可以运行超过页面的末尾.我建议它至少与您认为用户将使用的最大纸张尺寸一样大.

别担心，这不会在文档末尾添加空白页.边距不同于其他形式的空白(例如填充和 <br> 标记)，因为它们在超出页面边界时会被抵消(参见规范，第 13.3.3 节).Firefox 和 IE 都会删除边距，但 Firefox 仍然会在页面底部生成一个页脚，就好像发生了分页符一样.(另一方面，IE 表现得好像边距从不存在，这就是这种方法在该浏览器中不起作用的原因.)

您可以将边距放在 伪元素上 保持您的 HTML 整洁，您可以使用 @media print 以防止其显示在屏幕上.

这是代码.要查看它在 Firefox 中的运行情况，请打开 this jsfiddle，右键单击输出，选择此框架 >仅显示此帧，并进行打印预览.

@media print {#内容:{显示:块；内容: "";底边距:594mm；/* 必须大于您支持的最大纸张尺寸 */}}

<头><tr><第>页眉</th></tr></thead><脚><tr><td>页脚</td></tr></tfoot><tr><td id="内容">content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content</td></tr></tbody></table>
<小时>
编辑
还有一个选项可以同时在 Firefox 和 IE 中使用.您所要做的就是将页脚放在单独的 
 中并将其固定到页面底部，然后使用重复的 
 作为一个间隔.不过，这种方法确实有一些小缺点(详细信息在代码段下方).
这是代码.要查看它在 Firefox 中的运行情况，请打开 this jsfiddle，右键单击输出，选择此框架 >仅显示此帧，并进行打印预览.在 IE 中，单击输出框，按 CTRL+A，进行打印预览，然后将As Laid Out On Screen"更改为As Selected On Screen".
@media print {#spacer {height: 2em;}/* 页脚的高度 + 一些额外的 */#页脚{位置:固定；底部:0；}}
<头><tr><第>页眉</th></tr><头><脚><tr><td id="spacer"></td></tr></tfoot><tr><td>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content</td></tr></tbody><div id="页脚">页脚

这种方法的主要限制是它在打印作业的每一页上都放置了相同的页脚，这意味着您不能有任何页脚不同或没有页脚的页面.此外，由于垫片的高度取决于页脚的高度，因此如果页脚高度发生变化，您必须对其进行调整.

I am using a table to create a footer on every page (works in Firefox, that's enough).

A JS Fiddle: https://jsfiddle.net/j9k2xzze/

(right click on the output pane -> This Frame -> Open Frame in New Tab. Then Print Preview will function as normal)

<table id="wrapper">
    <thead>
    <tr>
        <td id="header"></td>
    </tr>
    </thead>

    <tfoot>
    <tr>
        <td colspan="0" id="footer">
            <img src="footer.jpg"/>
        </td>
    </tr>
    </tfoot>

    <tbody>
    <tr>
        <td id="content">
            <?php echo $html; ?>
        </td>
    </tr>
    </tbody>
</table>

But on the very last page the table footer is displayed directly below the text. If the text is shorter than the last page, the footer sticks to it.

I like the footer to be at the very bottom on the last page. Unfortunately the @page extension does not work in firefox or I am doing it wrong:

@page:last {
  #footer {
    position: absolute;
    bottom: 0;
  }
}

解决方案

If you're only supporting Firefox, this is actually really easy. (Skip to the edit to see a technique that also works in IE but is less versatile. Chrome and the other webkit browsers didn't support repeating footers when I posted this answer, so I didn't test them).

All you have to do is add a large bottom margin at the end of your content. The exact size doesn't matter, but it must be large enough to be guaranteed to run past the end of the page. I recommend making it at least as large as the maximum paper size you think your users will use.

Don't worry, this won't add a blank page to the end of your document. Margins differ from other forms of white space (such as padding and <br> tags) in that they get cancelled out when they exceed the page boundary (see spec, section 13.3.3). Both Firefox and IE will delete the margin, but Firefox will still generate a footer at the bottom of the page as if a page break had occurred. (IE, on the other hand, behaves as if the margin was never there, which is why this approach doesn't work in that browser.)

You can put the margin on a pseudo-element to keep your HTML tidy, and you can use @media print to prevent it from showing on screen.

Here's the code. To see it work in Firefox, open this jsfiddle, right-click the output, select This Frame > Show Only This Frame, and do a print preview.

@media print {
  #content:after {
    display: block;
    content: "";
    margin-bottom: 594mm; /* must be larger than largest paper size you support */
  }
}

<table>
  <thead>
    <tr>
      <th>PAGE HEADER</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td>PAGE FOOTER</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td id="content">
        content<br>content<br>content<br>content<br>content<br>content<br>content<br>
        content<br>content<br>content<br>content<br>content<br>content<br>content<br>
        content<br>content<br>content<br>content<br>content<br>content<br>content<br>
        content<br>content<br>content<br>content<br>content<br>content<br>content<br>
        content<br>content<br>content<br>content<br>content<br>content<br>content<br>
        content<br>content<br>content<br>content<br>content<br>content<br>content<br>
        content<br>content<br>content<br>content<br>content<br>content<br>content<br>
        content<br>content<br>content<br>content<br>content<br>content<br>content<br>
        content<br>content<br>content<br>content<br>content<br>content<br>content<br>
        content<br>content<br>content<br>content<br>content<br>content<br>content
      </td>
    </tr>
  </tbody>
</table>

---

EDIT

There's another option that works in both Firefox and IE. All you have to do is put the footer in a separate <div> and fix it to the bottom of the page, and then use the repeating <tfoot> as a spacer. This approach does have some minor drawbacks, though (details below snippet).

Here's the code. To see it work in Firefox, open this jsfiddle, right-click the output, select This Frame > Show Only This Frame, and do a print preview. In IE, click in the output frame, hit CTRL+A, do a print preview, and change "As Laid Out On Screen" to "As Selected On Screen".

@media print {
  #spacer {height: 2em;} /* height of footer + a little extra */
  #footer {
    position: fixed;
    bottom: 0;
  }
}

<table>
  <thead>
    <tr>
      <th>PAGE HEADER</th>
    </tr>
  <thead>
  <tfoot>
    <tr>
      <td id="spacer"></td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>
        content<br>content<br>content<br>content<br>content<br>content<br>content<br>
        content<br>content<br>content<br>content<br>content<br>content<br>content<br>
        content<br>content<br>content<br>content<br>content<br>content<br>content<br>
        content<br>content<br>content<br>content<br>content<br>content<br>content<br>
        content<br>content<br>content<br>content<br>content<br>content<br>content<br>
        content<br>content<br>content<br>content<br>content<br>content<br>content<br>
        content<br>content<br>content<br>content<br>content<br>content<br>content<br>
        content<br>content<br>content<br>content<br>content<br>content<br>content<br>
        content<br>content<br>content<br>content<br>content<br>content<br>content<br>
        content<br>content<br>content<br>content<br>content<br>content<br>content
      </td>
    </tr>
  </tbody>
</table>

<div id="footer">
  PAGE FOOTER
</div>

The main limitation of this method is that it puts an identical footer on every page in the print job, which means you can't have any pages with a different footer, or no footer. Also, since the height of the spacer depends on the height of the footer, you'll have to adjust it if the footer height ever changes.

这篇关于在最后一页的最底部打印表格页脚的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！