印刷モードでテーブルヘッダーを繰り返す


101

CSSで@page内のプロパティを使用して、テーブルが複数のページにまたがる場合、テーブルヘッダー(th)をすべてのページで繰り返す必要があると言うことはできますか?

回答:


109

これがTHEAD要素の目的です。公式ドキュメントはこちら


1
私はそれについては考えていませんが、実際には機能していないようです。
avernet 2008年

1
私はそれをFirefoxでうまく使用しました。
jishi 2008年

5
いつものように、壊れていないブラウザが必要です-jishiのコメントを参照してください。
Peter Rowell、

9
これらのコメントはかなり古いものです。3/13/13の時点で、レイジースポットチェックは最新のIE10で動作すること、そして由緒あるIE8でも動作することを示しています...
Nathan

8
Chromeは最終的に、印刷メディアの繰り返しテーブルヘッダーをサポートします。これは、がある場合に有効になり、break-inside:avoidで無効にすることができますbreak:inside: autocodereview.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の生成に使用しているFlying Saucerも同様です。また、Flying Saucerメーリングリストでこの質問をして、別の方法があるかどうかを確認します。
avernet 2008年

7
ChromeとSafariの最新バージョンも、現在これを行いません。問題トラッカーへのリンクについては、私の回答を参照してください。
Nick Knowlson 2012年

1
神の母、これが書かれた当時、IE5はまだ何かでしたか?
igorsantos07

私はtheadCSS(IE7互換)で例を試しましたが、印刷プレビューを行うと見出しが繰り返されます。ありがとうございました。しかし、次のページの上部に複製された行が表示されるのがわかります。どうして?
Andrew Truckle 2017年

45

このソリューションを実装する前に、Webkitが現在これを実行していないことを知っておくことが重要です。

Chromeの問題トラッカーの関連する問題は次のとおりです:http : //code.google.com/p/chromium/issues/detail?id=24826

そして、Webkit issue tracker:https : //bugs.webkit.org/show_bug.cgi?id=17205

それがあなたにとって重要であることを示したい場合は、Chromeの課題追跡にスターを付けてください(私はやりました)。


1
これをありがとう-私が下にスクロールしていなければ、それは私に大きな頭痛を引き起こしたでしょう。
セイリア2014

4
そして、ほぼ4年後(およびWebKitの問題が提出されてから8年後)でも、これは事実です。
jcaron

41

以下をCSSに追加すると、Flying Saucer xhtmlrendererはPDF出力のすべてのページでTHEADを繰り返します。

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

(少なくともR8リリース以降は機能します。)


4
これはまさに私が探していたものです。ありがとうございました!
Alex

驚くばかり!(リンクは無効です:/)
Cyril N.

驚くばかり!ありがとう!
Frison Alexander

6

ChromeおよびOperaブラウザーはサポートしてthead {display: table-header-group;}いませんが、他のブラウザーは適切にサポートしています。


クロムでこれを達成する方法?
Nullポインタ

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>

デスクトップのクロムで作業するだけです.iPhoneのChrome / Safariは機能しません!
Devin Gong
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.