在打印模式下重复表格标题


101

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

Answers:


109

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


1
我没有考虑过,但实际上似乎不起作用。
avernet

1
我已经在Firefox中成功使用了它。
吉士

5
像往常一样,它需要一个不间断的浏览器-参见jishi的评论。
彼得罗威尔

9
这些评论很老。截至
Nathan

8
Chrome最终支持用于打印介质的重复表格标题。如果已启用此功能,则break-inside:avoid可以使用禁用它break:inside: auto。参见codereview.chromium.org/2021703002/#ps20001
Alex Osborn

69

某些浏览器thead按照预期在每个页面上重复该元素。其他人需要一些帮助:将其添加到您的CSS:

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

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

来源


我用来生成PDF的飞碟也没有。我还将在飞碟邮件列表中询问此问题,以查看是否还有其他方法可以执行此操作。
avernet

7
Chrome和Safari的最新版本目前也未执行此操作。请参阅我的答案以获取指向其问题跟踪器的链接。
Nick Knowlson 2012年

1
上帝之母,在撰写本文时,IE5仍然是什么?
igorsantos16年

我刚刚thead在CSS(与IE7兼容)中尝试了该示例,并且在进行打印预览时确实重复了标题。谢谢。但是,我看到在下一页的顶部有一个复制行。为什么?
安德鲁·特拉克

45

在实施此解决方案之前,重要的是要知道Webkit当前不这样做。

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

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

如果您想表明它对您很重要,请在Chrome问题跟踪器上为其加注星标(我这样做了)。


1
谢谢-如果我不向下滚动的话,那会让我头疼。
Seiyria 2014年

4
大约4年后(以及WebKit问题提交以来的8年),情况仍然如此!
jcaron '16


6

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


如何在Chrome中实现这一目标?
空指针'18

4

我如何打印HTML表。每页的页眉和页脚

也可以在Webkit浏览器中使用

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript">
        function PrintPage() {
            document.getElementById('print').style.display = 'none';
            window.resizeTo(960, 600);
            document.URL = "";
            window.location.href = "";
            window.print();
        }

    </script>
    <style type="text/css" media="print">
        @page
        {
            size: auto; /* auto is the initial value */
            margin: 2mm 4mm 0mm 0mm; /* this affects the margin in the printer settings */
        }
        thead
        {
            display: table-header-group;
        }
        tfoot
        {
            display: table-footer-group;
        }
    </style>
    <style type="text/css" media="screen">
        thead
        {
            display: block;
        }
        tfoot
        {
            display: block;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <table style="width: 500px; margin: 0 auto;">
            <thead>
                <tr>
                    <td>
                        header comes here for each page
                    </td>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>
                        1
                    </td>
                </tr>
                <tr>
                    <td>
                        2
                    </td>
                </tr>
                <tr>
                    <td>
                        3
                    </td>
                </tr>
                <tr>
                    <td>
                        4
                    </td>
                </tr>
                <tr>
                    <td>
                        5
                    </td>
                </tr>
                <tr>
                    <td>
                        6
                    </td>
                </tr>
                <tr>
                    <td>
                        7
                    </td>
                </tr>
                <tr>
                    <td>
                        8
                    </td>
                </tr>
                <tr>
                    <td>
                        9
                    </td>
                </tr>
                <tr>
                    <td>
                        10
                    </td>
                </tr>
                <tr>
                    <td>
                        11
                    </td>
                </tr>
                <tr>
                    <td>
                        12
                    </td>
                </tr>
                <tr>
                    <td>
                        13
                    </td>
                </tr>
                <tr>
                    <td>
                        14
                    </td>
                </tr>
                <tr>
                    <td>
                        15
                    </td>
                </tr>
                <tr>
                    <td>
                        16
                    </td>
                </tr>
                <tr>
                    <td>
                        17
                    </td>
                </tr>
                <tr>
                    <td>
                        18
                    </td>
                </tr>
                <tr>
                    <td>
                        19
                    </td>
                </tr>
                <tr>
                    <td>
                        20
                    </td>
                </tr>
                <tr>
                    <td>
                        21
                    </td>
                </tr>
                <tr>
                    <td>
                        22
                    </td>
                </tr>
                <tr>
                    <td>
                        23
                    </td>
                </tr>
                <tr>
                    <td>
                        24
                    </td>
                </tr>
                <tr>
                    <td>
                        25
                    </td>
                </tr>
                <tr>
                    <td>
                        26
                    </td>
                </tr>
                <tr>
                    <td>
                        27
                    </td>
                </tr>
                <tr>
                    <td>
                        28
                    </td>
                </tr>
                <tr>
                    <td>
                        29
                    </td>
                </tr>
                <tr>
                    <td>
                        30
                    </td>
                </tr>
                <tr>
                    <td>
                        31
                    </td>
                </tr>
                <tr>
                    <td>
                        32
                    </td>
                </tr>
                <tr>
                    <td>
                        33
                    </td>
                </tr>
                <tr>
                    <td>
                        34
                    </td>
                </tr>
                <tr>
                    <td>
                        35
                    </td>
                </tr>
                <tr>
                    <td>
                        36
                    </td>
                </tr>
                <tr>
                    <td>
                        37
                    </td>
                </tr>
                <tr>
                    <td>
                        38
                    </td>
                </tr>
                <tr>
                    <td>
                        39
                    </td>
                </tr>
                <tr>
                    <td>
                        40
                    </td>
                </tr>
                <tr>
                    <td>
                        41
                    </td>
                </tr>
                <tr>
                    <td>
                        42
                    </td>
                </tr>
                <tr>
                    <td>
                        43
                    </td>
                </tr>
                <tr>
                    <td>
                        44
                    </td>
                </tr>
                <tr>
                    <td>
                        45
                    </td>
                </tr>
                <tr>
                    <td>
                        46
                    </td>
                </tr>
                <tr>
                    <td>
                        47
                    </td>
                </tr>
                <tr>
                    <td>
                        48
                    </td>
                </tr>
                <tr>
                    <td>
                        49
                    </td>
                </tr>
                <tr>
                    <td>
                        50
                    </td>
                </tr>
                <tr>
                    <td>
                        51
                    </td>
                </tr>
                <tr>
                    <td>
                        52
                    </td>
                </tr>
                <tr>
                    <td>
                        53
                    </td>
                </tr>
                <tr>
                    <td>
                        54
                    </td>
                </tr>
                <tr>
                    <td>
                        55
                    </td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td>
                        footer comes here for each page
                    </td>
                </tr>
            </tfoot>
        </table>
    </div>
    <br clear="all" />
    <input type="button" id="print" name="print" value="Print" onclick="javascript:PrintPage();"
        class="button" />
    </form>
</body>
</html>

只能在台式机Chrome上使用。iPhone上的Chrome / Safari无法使用!
Devin Gong
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.