我正在创建一个电视节目,它不应该有至少一个标准浏览器的打印问题.
我需要在每个页面上放置标志和标题加表头,经过几天的尝试和搜索,我发现Chrome不会打印表头和位置：固定元素在每个页面上,因为这个known bug.
由于诸如使用-webkit-print-color-adjust打印背景颜色的功能：我已经大量使用并且使用CSS @page属性更改了页面边框,所以我已经自定义了我的视图来使用Google Chrome,但现在我看到它无法打印标题我正在寻找一个替代方案是：
>要忘记Chrome并开始为另一个浏览器创建打印视图,需要进行调整以打印背景颜色并更改页边距(恐怕不可能).
>找到一个CSS / JS解决方案,使Google Chrome在每个页面上打印表头.
TL; DR：你知道任何jQuery / JavaScript / etc.在Chrome中的每个页面上打印表头的代码？
解决方法
是的,这是一个Webkit / Chrome的东西.
它不会在每个页面上打印. FF例如.
你可以做些什么来实现这样的事情是使用分页符.
它不会在每个页面上打印. FF例如.
你可以做些什么来实现这样的事情是使用分页符.
分页符只适用于块元素,因此您应该相应地对其进行调整.
喜欢这个：
tr{
display:block;
}
现在,你应该开始复制你的thead并把它放在每第X行与javascript：
var head = $('table thead tr');
$( "tbody tr:nth-child(10n+10)" ).after(head.clone());
在屏幕上,你不想要所有的头.删除他们与媒体查询这(为方便起见我添加了一个.头类在我的> tr行：
@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不允许您只打开预览框架,因此打印不起作用,将自己的文件中的所有内容合并,您将看到表格将分解,造型不完美,而不是灵活,因为您的浏览器本身决定在哪里分裂,但嘿,这是东西.
