Repite los encabezados de las tablas en el modo de impresión

101

¿Es posible en CSS usar una propiedad dentro de una @page para decir que los encabezados de tabla (th) deben repetirse en cada página si la tabla se extiende por varias páginas?

css css-tables avernet
fuente

Respuestas:

109

Para eso sirve el elemento THEAD . Documentos oficiales aquí .

tvanfosson
fuente
1
No he pensado en eso, pero no parece funcionar en la práctica.
avernet
1
Lo he usado con éxito en Firefox.
jishi
5
Como de costumbre, requiere un navegador que no esté dañado; consulte el comentario de jishi.
Peter Rowell
9
Estos comentarios son bastante antiguos. A partir del 13/03/13, la verificación puntual perezosa muestra que funciona en el último IE10, e incluso en el venerable IE8 ...
Nathan
8
Chrome finalmente admite encabezados de tabla repetidos para medios impresos. Esto está habilitado si el th tiene break-inside:avoidy se puede deshabilitar con break:inside: auto. Ver codereview.chromium.org/2021703002/#ps20001
Alex Osborn
69

Algunos navegadores repiten el theadelemento en cada página, como se supone que deben hacerlo. Otros necesitan ayuda: agregue esto a su CSS:

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

Opera 7.5 e IE 5 no repetirán los encabezados sin importar lo que intentes.

( fuente )

nickf
fuente
Tampoco Flying Saucer, que estoy usando para generar un PDF. También haré esta pregunta en la lista de correo de Flying Saucer para ver si hay otra forma de hacerlo.
avernet
7
Las últimas versiones de Chrome y Safari tampoco hacen esto actualmente. Consulte mi respuesta para obtener enlaces a sus rastreadores de problemas.
Nick Knowlson
1
madre de dios, en el momento en que esto fue escrito IE5 todavía era algo?
igorsantos07
Acabo de probar el theadejemplo en mi CSS (compatible con IE7) y repite los títulos cuando hago una vista previa de impresión. Gracias. Pero veo que aparece una fila replicada en la parte superior de la página siguiente. ¿Por qué?
Andrew Truckle
45

Antes de implementar esta solución, es importante saber que Webkit actualmente no hace esto.

Aquí está el problema relevante en el rastreador de problemas de Chrome: http://code.google.com/p/chromium/issues/detail?id=24826

Y en el rastreador de problemas de Webkit: https://bugs.webkit.org/show_bug.cgi?id=17205

Destaca en el rastreador de problemas de Chrome si quieres demostrar que es importante para ti (yo lo hice).

Nick Knowlson
fuente
1
Gracias por esto, me habría causado un gran dolor de cabeza si no me hubiera desplazado hacia abajo.
Seiyria
4
Y casi 4 años después (y 8 años desde que se presentó el problema de WebKit), ¡este sigue siendo el caso!
jcaron
41

Flying Saucer xhtmlrenderer repite THEAD en cada página de salida PDF, si agrega lo siguiente a su CSS:

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

(Funciona al menos desde el lanzamiento de R8).

Eero
fuente
4
Esto es justo lo que estaba buscando. ¡Gracias!
Alex
¡Increíble! (el enlace está muerto: /)
Cyril N.
¡Increíble! ¡Gracias!
Frison Alexander
6

Los navegadores Chrome y Opera no son compatibles, thead {display: table-header-group;}pero el resto de los demás lo admiten correctamente.

SantoshK
fuente
¿Cómo lograr esto en Chrome?
Puntero nulo
4

¿Cómo imprimo una tabla HTML? Encabezado y pie de página en cada página

También funciona en 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
fuente
Solo funciona en Chrome de escritorio. ¡Chrome/Safari en iPhone no funciona!
Devin Gong