Répéter les en-têtes de tableau en mode d'impression

101

Est-il possible en CSS d'utiliser une propriété dans une @page pour dire que les en-têtes de tableau (th) doivent être répétés sur chaque page si le tableau s'étend sur plusieurs pages?

css css-tables avernet
la source

Réponses:

109

C'est à cela que sert l' élément THEAD . Documents officiels ici .

Tvanfosson
la source
1
Je n'y ai pas pensé, mais cela ne semble pas fonctionner dans la pratique.
avernet
1
J'ai utilisé cela avec succès dans Firefox.
jishi
5
Comme d'habitude, il nécessite un navigateur non cassé - voir le commentaire de jishi.
Peter Rowell
9
Ces commentaires sont assez anciens. À partir du 13/03/13, le contrôle ponctuel paresseux montre qu'il fonctionne dans le dernier IE10, et même le vénérable IE8 ...
Nathan
8
Chrome prend enfin en charge les en-têtes de tableau répétés pour les supports d'impression. Ceci est activé si le th a break-inside:avoid, et peut être désactivé avec break:inside: auto. Voir codereview.chromium.org/2021703002/#ps20001
Alex Osborn
70

Certains navigateurs répètent l' theadélément sur chaque page, comme ils sont censés le faire. D'autres ont besoin d'aide: ajoutez ceci à votre CSS:

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

Opera 7.5 et IE 5 ne répéteront pas les en-têtes, peu importe ce que vous essayez.

( source )

nickf
la source
Flying Saucer non plus, que j'utilise pour générer un PDF. Je poserai également cette question sur la liste de diffusion Flying Saucer pour voir s'il existe une autre façon de le faire.
avernet
7
Les dernières versions de Chrome et Safari ne le font pas non plus actuellement. Consultez ma réponse pour obtenir des liens vers leurs outils de suivi des problèmes.
Nick Knowlson
1
mère de Dieu, au moment où cela a été écrit IE5 était encore quelque chose?
igorsantos07
Je viens d'essayer l' theadexemple dans mon CSS (compatible IE7) et il répète les en-têtes lorsque je fais un aperçu avant impression. Je vous remercie. Mais, je vois pour obtenir une ligne répliquée en haut de la page suivante. Pourquoi?
Andrew Truckle
45

Avant de mettre en œuvre cette solution, il est important de savoir que Webkit ne le fait actuellement pas.

Voici le problème concernant l'outil de suivi des problèmes de Chrome: http://code.google.com/p/chromium/issues/detail?id=24826

Et sur le suivi des problèmes Webkit: https://bugs.webkit.org/show_bug.cgi?id=17205

Mettez-le en vedette sur le suivi des problèmes de Chrome si vous souhaitez montrer qu'il est important pour vous (c'est ce que j'ai fait).

Nick Knowlson
la source
1
Merci pour cela - cela m'aurait causé un énorme mal de tête si je n'avais pas fait défiler vers le bas.
Seiyria
4
Et près de 4 ans plus tard (et 8 ans depuis le dépôt du dossier WebKit), c'est toujours le cas!
jcaron le
41

Flying Saucer xhtmlrenderer répète le THEAD sur chaque page de sortie PDF, si vous ajoutez ce qui suit à votre CSS:

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

(Cela fonctionne au moins depuis la version R8.)

Eero
la source
4
C'est exactement ce que je cherchais. Je vous remercie!
Alex
Impressionnant! (le lien est mort: /)
Cyril
Impressionnant! Merci!
Frison Alexander
6

Les navigateurs Chrome et Opera ne prennent pas en charge, thead {display: table-header-group;}mais les autres le prennent correctement en charge.

SantoshK
la source
comment y parvenir en chrome?
Null Pointer
4

comment imprimer un tableau HTML. En-tête et pied de page sur chaque page

Fonctionne également dans les navigateurs 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>
Urooj Khan
la source
Il suffit de travailler sur le chrome de bureau. Chrome/Safari sur l'iphone ne fonctionne pas!
Devin Gong