当前位置:  开发笔记 > 编程语言 > 正文

在打印模式下重复表头

如何解决《在打印模式下重复表头》经验,为你挑选了6个好方法。

是否可以在CSS中使用@page内的属性来表示如果表格分布在多个页面上,则应在每个页面上重复表头(th)?



1> tvanfosson..:

这就是THEAD元素的用途.官方文档在这里.


这些评论很古老.截至2013年3月13日,懒惰的现场检查显示它可以在最新的IE10中运行,甚至是古老的IE8 ......
Chrome最终支持重复的打印介质表格标题.如果th具有`break-inside:avoid`,则可以使用`break:inside:auto`禁用.请参阅https://codereview.chromium.org/2021703002/#ps20001
像往常一样,它需要一个不破坏的浏览器 - 请参阅jishi的评论.

2> nickf..:

有些浏览器会thead像每个页面那样重复每个页面上的元素.其他人需要一些帮助:将其添加到您的CSS:

thead {display: table-header-group;}
tfoot {display: table-header-group;}

无论您尝试什么,Opera 7.5和IE 5都不会重复标题.

(来源)


最新版本的Chrome和Safari目前也不会这样做.有关其问题跟踪器的链接,请参阅我的回答.

3> Nick Knowlso..:

在实现此解决方案之前,了解Webkit当前不执行此操作非常重要.

以下是Chrome问题跟踪器上的相关问题:http://code.google.com/p/chromium/issues/detail? id = 24826

在Webkit问题跟踪器上:https://bugs.webkit.org/show_bug.cgi?id = 17205

如果您想证明它对您很重要(我做过),请在Chrome问题跟踪器上加注星标.


近4年后(自WebKit问题提交8年以来),情况仍然如此!

4> Eero..:

如果您在CSS中添加以下内容,Flying Saucer xhtmlrenderer会在PDF输出的每一页上重复THEAD:

        table {
            -fs-table-paginate: paginate;
        }

(它至少在R8发布后起作用.)


这正是我想要的.谢谢!

5> SantoshK..:

Chrome和Opera浏览器不支持,thead {display: table-header-group;}但其他人支持正确..



6> 小智..:

我如何打印HTML表格.每页上的页眉和页脚

也适用于Webkit浏览器



    
    
    
    


    
header comes here for each page
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
footer comes here for each page

推荐阅读
U友50081205_653
这个屌丝很懒,什么也没留下!
DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6
Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved devBox.cn 开发工具箱 版权所有