Imprimir Header & Footer en cada página [HTML, CSS]

En ocasiones necesitamos mostrar en cada página de una impresión un encabezado y el respectivo pie de página, ya sea en la creación de reportes, informes o simplemente si se desea imprimir varias páginas de un documento creado en nuestro sitio web.

Lo más recomendable es crear un reporte con las clases determinadas para ello, en el caso de PHP con PHP Report, o para otros lenguajes de programación, utilizar las respectivas clases o librerías para ello.

Sin embargo, si queremos hacerlo usando HTML y CSS, lo podemos realizar con los tradicionales <table> y los estilos, el problema es que no es compatible con Navegadores WebKit.

Compatibilidad


Firefox, Opera e Internet Explorer.

En navegadores WebKit (Chrome, Safari) no soporta esas propiedades, y sólo permitirán que el elemento aparezca una vez. Este es un problema generalizado y ya está reportado como Bug.

Maquetación


<html>
<head>
    <title>Repitiendo Header & Footer</title>
</head>
<body>
    <table>
        <!-- Table header que sera repetido en el Header  -->
        <thead style="display: table-header-group">
            <tr>
                <th>
                    Contenido Encabezado
                </th>
            </tr>
        </thead>
        <!-- Table header que sera repetido en el Footer -->
        <tfoot style="display: table-footer-group">
            <tr>
                <td>
                    Contenido Pie de pagina
                </td>
            </tr>
        </tfoot>
        <!-- Table body -->
        <tbody>
            <tr>
                <td>
Contenido
</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

Explicación

Esta opción es muy simple, ya que a través de las propiedades CSS se determina que se debe repetir cierto elemento de una tabla en las distintas páginas (Modo impresión.)
 <thead> se aplica el estilo table-header-group
<tfoot> se aplica el estilo table-footer-group
<tbody> allí iría el contenido.

Anderson Rubio

Phasellus facilisis convallis metus, ut imperdiet augue auctor nec. Duis at velit id augue lobortis porta. Sed varius, enim accumsan aliquam tincidunt, tortor urna vulputate quam, eget finibus urna est in augue.