【发布时间】：2013-05-22 00:49:43
【问题描述】：
我正在做噩梦，弄清楚如何正确设置 CSS 和 HTML 布局以在我们的网络应用程序中打印文档。我们有不同的文件进入系统（订单、发票、交货单……）。文件包括：
- 静态标题（公司标志、联系信息）
- 身体
- 客户数据（送货地址、帐单地址）
- items 表格（多行表格，可以跨多个页面）
- 静态页脚（免责声明）
我想要的是以下打印功能：
- 如果正文分布在几页中，我希望静态页眉和页脚打印在每一页上
- 如果项目表分布在更多页面中，则在每页打印一个表头
目前我的 HTML 布局是这样的：
<!-- STATIC HEADER -->
<div id="pageHeader">
<table class="table">
<tr>
<td>Static header content here</td>
</tr>
</table>
</div>
<!-- DOCUMENT CONTENT -->
<div id="pageBody">
<!-- Customer data -->
<table class="table">
<tr>
<td>Customer data here</td>
</tr>
</table>
<!-- Items table -->
<table class="table table-condensed table-print">
<thead style="display:table-header-group;">
<tr>
<th>Table header here</th>
</tr>
</thead>
<tbody>
<tr>
<td>Rows here</td>
</tr>
</tbody>
</table>
</div>
<!-- STATIC FOOTER -->
<div id="pageFooter">
<table class="table">
<tr>
<td>Static footer content here</td>
</tr>
</table>
</div>
我正在阅读有关在this question 上回答后运行页眉和页脚的信息，但我没有得到想要的结果。目前我的 CSS 设置如下：
#pageHeader, #pageFooter { display: none; }
@media print {
#pageHeader { display: block; position: running(pageHeader); width: 100%; }
#pageFooter { display: block; position: running(pageFooter); width: 100%; }
}
@page {
@top-center {
content: element(pageHeader);
}
@bottom-center {
content: element(pageFooter);
}
}
Firefox 给了我完全奇怪的结果。它首先打印一个空白页，然后如果是单页文档则可以打印第二页，如果是多页文档则只打印第一页，其他页面将被忽略。
谷歌浏览器稍微好一点。它打印所有页面，但不会在每一页上打印静态页眉和页脚。页眉只打印在第一页，而页脚只打印在最后一页。
另外一个问题是，如果表格分布在多个页面中，则可以分布在多个页面中的主表不会在每个页面中打印表头。我认为<thead> 上的display:table-header-group; 应该这样做？
这是不可能实现的，还是我做错了什么？如果您能就如何处理这个问题给我任何建议或策略，我将非常高兴。由于这个应用程序在受控环境中运行，我可以专注于一两个浏览器（Chrome 和 Firefox 会很棒）。如果它适用于两者都是奖金！
【问题讨论】：
-
我发布了一种与 Chrome 兼容的方法来模拟正在运行的页眉 here（但不支持页脚），以及重复表头的解决方案 @ 987654323@.