在打印模式下重复表头

Question

在打印模式下重复表头

ave*_*net 91 css css-tables

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

Answer 1

tva*_*son 100

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

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

Answer 2

nic*_*ckf 67

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

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

Run Code Online (Sandbox Code Playgroud)

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

_(来源)

最新版本的Chrome和Safari目前也不会这样做.有关其问题跟踪器的链接,请参阅我的回答. (7认同)
天啊，写这篇文章的时候IE5还是什么东西？ (2认同)

Answer 3

Nic*_*son 45

在实现此解决方案之前,了解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年以来),情况仍然如此! (3认同)
谢谢你 - 如果我没有向下滚动，它会让我头疼。 (2认同)

Answer 4

Eer*_*ero 40

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

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

Run Code Online (Sandbox Code Playgroud)

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

这正是我想要的.谢谢! (4认同)

Answer 5

San*_*shK 6

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

Answer 6

小智 5

我如何打印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>

Run Code Online (Sandbox Code Playgroud)

归档时间：	17 年，1 月前
查看次数：	123664 次
最近记录：	6 年，8 月前