为谷歌浏览器中的每一页打印一个标题答案

【问题标题】：Print a header for every page in Google Chrome为谷歌浏览器中的每一页打印一个标题
【发布时间】：2013-02-09 02:36:29
【问题描述】：

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

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

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

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

【问题讨论】：

【解决方案1】：

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

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

像这样：

tr{
    display:block;
}

现在，你应该开始复制你的thead并用javascript将它放在每X行：

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

在屏幕上，您不想要所有这些头像。使用媒体查询删除它们（为方便起见，我在我的 th > 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 不允许您仅打开预览框架，因此无法在此处打印，将所有内容合并到您自己的文件中，您会看到表格会分开，样式不完美，也不是灵活，因为您的浏览器本身决定在哪里拆分，但是，嘿，它的东西。

【讨论】：

感谢您的回答。自从我遇到这个问题以来已经有很长时间了，我通过不使用 Chrome 来解决这个问题。 :D 无论如何，你的回答似乎很有希望，我会尽快试一试。再次感谢。
这似乎确实有效，但这意味着您必须在放置分页符的位置上有些保守。猜测打印时任意 HTML 元素的垂直高度所涉及的所有变量是不可能的。但是，如果内容的高度非常统一，您可以很好地完成这项工作。

【解决方案2】：

我有 posted a solution here 解决了这个问题，并且不需要您尝试通过强制分页符来抢占自然分页符（这种技术本质上不可靠并且容易浪费纸张）。

【讨论】：

【解决方案3】：

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

【讨论】：