我正在做噩梦，弄清楚如何正确设置 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>
我正在阅读关于在这个问题的答案之后运行页眉和页脚的信息，但我没有得到想要的结果。目前我的 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 给了我完全奇怪的结果。它首先打印一个空白页，如果是单页文档，则第二页可以，如果是多页文档，则只打印第一页，其他页面被忽略。
谷歌浏览器稍微好一点。它打印所有页面，但不会在每一页上打印静态页眉和页脚。页眉仅打印在第一页上，而页脚仅打印在最后一页上。
另一个问题是，如果表格分布在多个页面中，则可以分布在多个页面中的主表不会在每个页面中打印表头。我以为应该这样display:table-header-group;做<thead>？
这只是不可能实现还是我做错了什么？如果您能就如何处理这个问题给我任何建议或策略，我将非常高兴。由于这个应用程序在受控环境中运行，我可以专注于一两个浏览器（Chrome 和 Firefox 会很棒）。如果它适用于两者是奖金！