为Google Chrome中的每个页面打印标题

Question

我正在创建一个电视节目表，至少在一个标准浏览器上不应该有任何打印问题。

我需要在每个页面上放置徽标和标题以及表格标题，经过几天的尝试和搜索，我发现Chrome不会在每个页面上打印表格标题和position: fixed元素，因为{{3 }}

由于我大量使用-webkit-print-color-adjust: exact打印背景颜色以及使用CSS @page属性更改页面边框等功能，我已自定义了我的视图以使用Google Chrome，但现在我看到它无法打印标题我正在寻找替代方案：

• 要忘记Chrome并开始为另一个浏览器创建打印视图，该浏览器需要进行调整以打印背景颜色并更改页边距（我担心这是不可能的）。
• 找到一个CSS / JS解决方案，让Google Chrome在每个页面上打印表格标题。

TL; DR：你知道任何jQuery / JavaScript /等。代码在Chrome中的每个页面上打印表格标题？

Answer 1

是的，这是一个Webkit / Chrome的东西。 它不会在每页上打印thead。例如FF。 你可以做些什么来实现这样的事情就是使用分页符。

分页符仅适用于块元素，因此您应该相应地设置样式。

像这样：

tr{
    display:block;
}

现在，您应该开始复制你的thead，并使用javascript：

将其放入每个第X行

var head = $('table thead tr');
$( "tbody tr:nth-child(10n+10)" ).after(head.clone());

在屏幕上，你不需要所有这些头。使用媒体查询删除它们（为方便起见，我在我的＆gt; tr行添加了.head类。：

@media screen {
    tbody .head{
        display: none;
    }
}

现在，在每个.head之前进行分页：

tbody tr.head {
    page-break-before: always;
    page-break-inside: avoid;
}

在地方查看：http://jsfiddle.net/jaap/7ZGVv/2/ 请记住，jsfiddle不允许您只打开预览框架，因此打印不能在一起工作，将所有内容组合在您自己的文件中，您会看到表格会分开，样式不完美，而且不是灵活，因为您的浏览器本身决定在哪里拆分，但嘿，这是一些东西。

Answer 2

我有posted a solution here解决了这个问题，并且不要求您尝试使用强制分页符来抢占自然分页符（这种技术本身就不可靠并且往往会浪费纸张）。

Answer 3

此解决方案不会完全适用于表头，但它将允许任意html的标头。我创建了一个允许Chrome打印页眉和页脚的库，请参阅this answer。