css - 在 Google Chrome 中为每个页面打印标题

Question

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

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

因为我经常使用 -webkit-print-color-adjust: exact 打印背景颜色和使用 CSS @page 更改页面边框等功能> 属性，我已自定义我的 View 以使用 Google Chrome，但现在我看到它无法打印标题我正在寻找替代方案:

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

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

Answer 1

是的，这是 Webkit/Chrome 的东西。它不会在每一页上打印 thead。例如 FF。要实现这样的目标，您可以做的是使用分页符。

分页符仅适用于 block 元素，因此您应该相应地设置 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 不允许您只打开预览框架，因此打印在这里不起作用，将所有内容合并到您自己的文件中，您会看到表格会分开，样式不完美，而且不像就像您的浏览器本身决定在何处拆分一样灵活，但是，嘿，这很重要。