Wiederholen Sie die Tabellenüberschriften im Druckmodus

101

Ist es in CSS möglich, mithilfe einer Eigenschaft innerhalb einer @ -Seite zu sagen, dass Tabellenüberschriften (th) auf jeder Seite wiederholt werden sollten, wenn sich die Tabelle über mehrere Seiten erstreckt?

css css-tables Avernet
quelle

Antworten:

109

Dafür ist das THEAD- Element gedacht . Offizielle Dokumente hier .

Tvanfosson
quelle
1
Ich habe nicht darüber nachgedacht, aber es scheint in der Praxis nicht zu funktionieren.
Avernet
1
Ich habe das erfolgreich in Firefox verwendet.
Jishi
5
Wie üblich ist ein nicht defekter Browser erforderlich - siehe Jishis Kommentar.
Peter Rowell
9
Diese Kommentare sind ziemlich alt. Ab dem 13.03.13 zeigt Lazy Spot Checking, dass es im neuesten IE10 und sogar im ehrwürdigen IE8 funktioniert ...
Nathan
8
Chrome unterstützt schließlich wiederholte Tabellenüberschriften für Printmedien. Dies ist aktiviert, wenn das th hat break-inside:avoid, und kann mit deaktiviert werden break:inside: auto. Siehe codereview.chromium.org/2021703002/#ps20001
Alex Osborn
69

Einige Browser wiederholen das theadElement auf jeder Seite wie vorgesehen. Andere brauchen Hilfe: Fügen Sie dies Ihrem CSS hinzu:

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

Opera 7.5 und IE 5 wiederholen keine Header, egal was Sie versuchen.

( Quelle )

nickf
quelle
Flying Saucer, mit dem ich ein PDF generiere, auch nicht. Ich werde diese Frage auch auf der Mailingliste von Flying Saucer stellen, um zu sehen, ob es einen anderen Weg gibt, dies zu tun.
Avernet
7
Die neuesten Versionen von Chrome und Safari tun dies derzeit ebenfalls nicht. In meiner Antwort finden Sie Links zu ihren Issue-Trackern.
Nick Knowlson
1
Muttergottes, zu der Zeit, als dies geschrieben wurde, war IE5 noch etwas?
igorsantos07
Ich habe das theadBeispiel gerade in meinem CSS (IE7-kompatibel) ausprobiert und es wiederholt die Überschriften, wenn ich eine Druckvorschau mache. Danke dir. Ich sehe jedoch, dass oben auf der nächsten Seite eine replizierte Zeile angezeigt wird. Warum?
Andrew Truckle
45

Bevor Sie diese Lösung implementieren, ist es wichtig zu wissen, dass Webkit dies derzeit nicht tut.

Hier ist das relevante Problem im Chrome Issue Tracker: http://code.google.com/p/chromium/issues/detail?id=24826

Und auf dem Webkit Issue Tracker: https://bugs.webkit.org/show_bug.cgi?id=17205

Markieren Sie es im Chrome Issue Tracker, wenn Sie zeigen möchten, dass es für Sie wichtig ist (ich habe es getan).

Nick Knowlson
quelle
1
Danke dafür - es hätte mir große Kopfschmerzen bereitet, wenn ich nicht nach unten gescrollt hätte.
Seiyria
4
Und fast 4 Jahre später (und 8 Jahre seit der Einreichung der WebKit-Ausgabe) ist dies immer noch der Fall!
JCaron
41

Flying Saucer xhtmlrenderer wiederholt THEAD auf jeder Seite der PDF-Ausgabe, wenn Sie Ihrem CSS Folgendes hinzufügen:

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

(Es funktioniert mindestens seit der Veröffentlichung von R8.)

Eero
quelle
4
Das ist genau das, wonach ich gesucht habe. Danke dir!
Alex
Genial! (Der Link ist tot: /)
Cyril N.
Genial! Vielen Dank!
Frison Alexander
6

Chrome- und Opera-Browser unterstützen dies nicht thead {display: table-header-group;}, andere werden jedoch ordnungsgemäß unterstützt.

SantoshK
quelle
Wie erreicht man das in Chrom?
Nullzeiger
4

Wie drucke ich eine HTML-Tabelle? Kopf- und Fußzeile auf jeder Seite

Arbeiten Sie auch in Webkit-Browsern

<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>
Urooj Khan
quelle
Arbeiten Sie einfach auf Desktop-Chrome.Chrome/Safari auf dem iPhone nicht!
Devin Gong