Ripeti le intestazioni della tabella in modalità di stampa


101

È possibile in CSS utilizzare una proprietà all'interno di una @page per dire che le intestazioni di tabella (th) dovrebbero essere ripetute su ogni pagina se la tabella si estende su più pagine?

Risposte:


109

Questo è lo scopo dell'elemento THEAD . Documenti ufficiali qui .


1
Non ci ho pensato, ma nella pratica non sembra funzionare.
avernet

1
L'ho usato con successo in Firefox.
jishi

5
Come al solito, richiede un browser non danneggiato - vedi il commento di jishi.
Peter Rowell

9
Questi commenti sono piuttosto vecchi. A partire dal 13/03/13 il controllo pigro mostra che funziona nell'ultimo IE10, e persino nel venerabile IE8 ...
Nathan

8
Chrome finalmente supporta le intestazioni di tabella ripetute per i supporti di stampa. Questo è abilitato se il th ha break-inside:avoid, e può essere disabilitato con break:inside: auto. Vedi codereview.chromium.org/2021703002/#ps20001
Alex Osborn

69

Alcuni browser ripetono l' theadelemento su ogni pagina, come dovrebbero. Altri hanno bisogno di aiuto: aggiungi questo al tuo CSS:

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

Opera 7.5 e IE 5 non ripeteranno le intestazioni, indipendentemente da ciò che provi.

( fonte )


Nemmeno Flying Saucer, che sto usando per generare un PDF. Farò questa domanda anche sulla mailing list Flying Saucer per vedere se c'è un altro modo per farlo.
avernet

7
Anche le ultime versioni di Chrome e Safari attualmente non lo fanno. Vedi la mia risposta per i link ai loro tracker dei problemi.
Nick Knowlson

1
madre di dio, nel momento in cui questo è stato scritto IE5 era ancora qualcosa?
igorsantos07

Ho appena provato l' theadesempio nel mio CSS (compatibile con IE7) e ripete i titoli quando eseguo un'anteprima di stampa. Grazie. Ma vedo di ottenere una riga replicata nella parte superiore della pagina successiva. Perché?
Andrew Truckle

45

Prima di implementare questa soluzione è importante sapere che Webkit attualmente non lo fa.

Ecco il problema rilevante nel tracker dei problemi di Chrome: http://code.google.com/p/chromium/issues/detail?id=24826

E sul tracker dei problemi Webkit: https://bugs.webkit.org/show_bug.cgi?id=17205

Aggiungilo al tracker dei problemi di Chrome se vuoi dimostrare che è importante per te (l'ho fatto).


1
Grazie per questo - mi avrebbe causato un enorme mal di testa se non avessi fatto scorrere verso il basso.
Seiyria

4
E quasi 4 anni dopo (e 8 anni da quando è stato presentato il problema WebKit), è ancora così!
jcaron

41

Flying Saucer xhtmlrenderer ripete il THEAD su ogni pagina dell'output PDF, se aggiungi quanto segue al tuo CSS:

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

(Funziona almeno dalla versione R8.)


4
Questo è proprio quello che stavo cercando. Grazie!
Alex

Eccezionale! (il collegamento è morto: /)
Cyril N.

Eccezionale! Grazie!
Frison Alexander

6

I browser Chrome e Opera non supportano, thead {display: table-header-group;}ma il resto degli altri supporta correttamente.


come ottenere questo in Chrome?
Puntatore nullo

4

come si stampa la tabella HTML. Intestazione e piè di pagina su ogni pagina

Funziona anche nei browser 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>

Basta lavorare su desktop chrome.Chrome/Safari su iphone non funziona!
Devin Gong
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.