CSS 在 Google Chrome 中为每个页面打印标题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15041761/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Print a header for every page in Google Chrome
提问by Farid Rn
I'm creating a TV schedule and it shouldn't have any print problems for at least one standard browser.
我正在创建一个电视节目表，对于至少一个标准浏览器，它不应该有任何打印问题。
I need to put logo and title plus table headers on every page, after days of trying and searching I found out that Chrome wouldn't print table headers and position: fixedelements on every page because of this known bug.
我需要在每个页面上放置徽标和标题以及表格标题，经过几天的尝试和搜索，我发现position: fixed由于这个已知错误，Chrome 不会在每个页面上打印表格标题和元素。
Because of the capabilities such as printing background colors with -webkit-print-color-adjust: exactwhich I've heavily used and changing page borders with CSS @pageproperty, I've customized my view to use Google Chrome, but now that I see it cannot print headers I'm looking for an alternatives which are:
由于-webkit-print-color-adjust: exact我经常使用的打印背景颜色和使用 CSS@page属性更改页面边框等功能，我自定义了我的视图以使用 Google Chrome，但现在我看到它无法打印标题，我正在寻找一个替代方案是：
- To forget Chrome and start creating print view for another browser which needs to do tweaks to print background colors and change page margins (I'm afraid it's not possible).
- To find a CSS/JS solution to make Google chrome to print table headers on every page.
- 忘记 Chrome 并开始为另一个需要调整打印背景颜色和更改页边距的浏览器创建打印视图（恐怕这是不可能的）。
- 找到一个 CSS/JS 解决方案，让谷歌浏览器在每一页上打印表格标题。
TL; DR:Do you know any jQuery/JavaScript/etc. code to print table headers on every page in Chrome?
TL; DR：你知道任何 jQuery/JavaScript/等。在 Chrome 中的每个页面上打印表格标题的代码？
采纳答案by Jaap
Yep, that's a Webkit/Chrome thing. It won't print the thead on each page. FF for instance does. What you could do to achieve something like this is use page-break.
是的，这是 Webkit/Chrome 的事情。它不会在每一页上打印标题。例如FF。您可以做的是使用分页符来实现这样的目标。
Page break does only work on block elements, so you should style your tr's accordingly.
分页符仅适用于块元素，因此您应该相应地设置 tr 的样式。
Like this:
像这样：
tr{
display:block;
}
Now, you should start copying your thead and put it in at every Xth row with javascript:
现在，您应该开始复制您的标题并使用 javascript 将其放入每个第 X 行：
var head = $('table thead tr');
$( "tbody tr:nth-child(10n+10)" ).after(head.clone());
On screen, you don't want all those heads. Remove them with a media query this (for convenience I added a .head class on my th > tr row.:
在屏幕上，你不想要所有这些头。使用媒体查询删除它们（为方便起见，我在我的 th > tr 行添加了一个 .head 类。：
@media screen {
tbody .head{
display: none;
}
}
Now before each .head make the page break:
现在在每个 .head 之前进行分页：
tbody tr.head {
page-break-before: always;
page-break-inside: avoid;
}
Check it out overhere: http://jsfiddle.net/jaap/7ZGVv/2/Keep in mind, jsfiddle doesn't allow you to open just the preview frame, so printing does not work overhere, combine everything in your own file and you'll see the tables will split up, styling is not perfect, and it's not as flexible as your browser itself deciding where to split, but hey, it's something.
在此处查看：http: //jsfiddle.net/jaap/7ZGVv/2/请记住，jsfiddle 不允许您仅打开预览框架，因此此处无法打印，请将所有内容合并到您自己的文件中，然后你会看到表格会分裂，样式并不完美，而且它不像浏览器本身决定分裂的位置那么灵活，但是，嘿，它是一些东西。
回答by DoctorDestructo
I have posted a solution herethat solves this problem and does not require you to try to preempt the natural page breaks with forced page breaks (a technique which is inherently unreliable and tends to waste paper).
我在这里发布了一个解决方案来解决这个问题，并且不需要您尝试使用强制分页符来抢占自然分页符（一种本质上不可靠且容易浪费纸张的技术）。
回答by lastmjs
This solution won't work exactly for table headers, but it will allow headers of arbitrary html. I've created a library that allows Chrome to print headers and footers, see this answer.
此解决方案不适用于表格标题，但它允许任意 html 的标题。我创建了一个库，允许 Chrome 打印页眉和页脚，请参阅此答案。
