Repita os cabeçalhos da tabela no modo de impressão

101

É possível em CSS, usando uma propriedade dentro de uma @page, dizer que os cabeçalhos da tabela (th) devem ser repetidos em todas as páginas se a tabela se espalhar por várias páginas?

css css-tables avernet
fonte

Respostas:

109

É para isso que serve o elemento THEAD . Documentos oficiais aqui .

Tvanfosson
fonte
1
Não pensei nisso, mas não parece funcionar na prática.
avernet
1
Eu usei isso com sucesso no Firefox.
jishi
5
Como de costume, requer um navegador não quebrado - veja o comentário de jishi.
Peter Rowell
9
Esses comentários são bastante antigos. A partir de 13/03/13 a checagem preguiçosa mostra que funciona no último IE10, e até mesmo no venerável IE8 ...
Nathan
8
O Chrome finalmente suporta cabeçalhos de tabela repetidos para mídia impressa. Isso é ativado se tiver break-inside:avoid, e pode ser desativado com break:inside: auto. Consulte codereview.chromium.org/2021703002/#ps20001
Alex Osborn
69

Alguns navegadores repetem o theadelemento em cada página, como deveriam. Outros precisam de ajuda: Adicione isto ao seu CSS:

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

Opera 7.5 e IE 5 não repetem cabeçalhos, não importa o que você tente.

( fonte )

nickf
fonte
Nem o Flying Saucer, que estou usando para gerar um PDF. Também farei essa pergunta na lista de discussão do Disco Voador para ver se há outra maneira de fazer isso.
avernet
7
As versões mais recentes do Chrome e Safari também não fazem isso atualmente. Veja minha resposta para links para seus rastreadores de problemas.
Nick Knowlson
1
mãe de deus, na época em que isso foi escrito IE5 ainda era alguma coisa?
igorsantos07
Acabei de experimentar o theadexemplo no meu CSS (compatível com o IE7) e ele repete os títulos quando faço uma visualização da impressão. Obrigado. Mas, vejo uma linha replicada no topo da próxima página. Por quê?
Andrew Truckle
45

Antes de implementar esta solução, é importante saber que o Webkit atualmente não faz isso.

Aqui está o problema relevante no rastreador de problemas do Chrome: http://code.google.com/p/chromium/issues/detail?id=24826

E no rastreador de problemas do Webkit: https://bugs.webkit.org/show_bug.cgi?id=17205

Marque com uma estrela no rastreador de problemas do Chrome se quiser mostrar que é importante para você (eu mostrei).

Nick Knowlson
fonte
1
Obrigado por isso - teria me causado uma enorme dor de cabeça se eu não tivesse rolado para baixo.
Seiyria
4
E quase 4 anos depois (e 8 anos desde que o problema do WebKit foi arquivado), ainda é o caso!
jcaron
41

Flying Saucer xhtmlrenderer repete o THEAD em todas as páginas de saída do PDF, se você adicionar o seguinte ao seu CSS:

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

(Funciona pelo menos desde o lançamento do R8.)

Eero
fonte
4
Isso é exatamente o que eu estava procurando. Obrigado!
Alex
Impressionante! (o link está inativo: /)
Cyril N.
Impressionante! Obrigado!
Frison Alexander
6

Os navegadores Chrome e Opera não são compatíveis, thead {display: table-header-group;}mas o restante dos outros é compatível.

SantoshK
fonte
como conseguir isso no cromo?
Null Pointer
4

como faço para imprimir a tabela HTML. Cabeçalho e rodapé em cada página

Também funciona em navegadores 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
fonte
Apenas trabalhe no desktop chrome.Chrome/Safari no iphone não funciona!
Devin Gong