html - tablas - Imprimir encabezado/pie de página en todas las páginas(Modo de impresión)
imprimir encabezado en todas las hojas excel 2016 (4)
<div id="header">header</div>
<div id="content">
content spanning several pages...
</div>
<div id="footer">Footer - Fixed at the bottom of each page</div>
Quiero imprimir #header y #footer en cada página en modo de impresión. Busqué mucho, pero nada parece funcionar, incluso la position:fixed no funciona como se esperaba.
Creo que llegué demasiado tarde :), pero estaba buscando algo como esto, y encontré una respuesta que me ayuda (fuente https://www.youtube.com/watch?v=yDgFLysON98 ). Escribí la etiqueta div antes y después del contenido como este.
<div id="header">Top div content</div>
.
.
.
<div id="footer">Bottom div content</div>
Ejemplo:
<!DOCTYPE html>
<html>
<head>``
<style>
body {
background-color: #CCC;
margin:48px 0px 0px 64px;
}
div#header {
position:fixed;
top:0px;
left:0px;
width:100%;
color:#CCC;
background:#333;
padding:8px;
}
div#footer {
position:fixed;
bottom:0px;
left:0px;
width:100%;
color:#CCC;
background:#333;
padding:8px;
}
</style>
</head>
<body>
<div id="header">HEADER</div>
<h1>Page Heading</h1>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<div id="footer">FOOTER</div>
</body>
</html>
... Espero que esto ayude.
La respuesta de Nisse Engstroms es correcta. Solo necesitas poner el contenido de thead y tfoot dentro de tr para que funcione. Y también es el mejor método porque cuando usas el posicionamiento absoluto en un div para hacer encabezado y pie de página, siempre se superpondrá con el contenido de tu cuerpo principal en el siguiente página.
<table>
<thead>
<tr> !-- these are important
<th id="header"> !--- these are important
!--- content of header here
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
!---- main body here
</td>
</tr>
</tbody>
<tfoot>
<tr>
<th id="footer">
!----- content of footer here
</th>
</tr>
</tfoot>
</table>
Para eso necesitas usar el mso (propiedades de Microsoft Office CSS) en tu estilo:
<style><--
@page
{
size:21cm 29.7cmt;
margin:1cm 1cm 1cm 1cm;
mso-title-page:yes;
mso-page-orientation: portrait;
mso-header: header;
mso-footer: footer;
}
@page content {margin: 1cm 1cm 1cm 1cm;}
div.content {page: content;}
</style>
Si está dispuesto a cambiar a las tablas para su diseño (no necesariamente ideal), puede hacerlo con los elementos <thead> y <tfoot> . Se imprimirán en la parte superior e inferior de cada página:
<table>
<thead>
<!-- Will print at the top of every page -->
</thead>
<tbody>
<!-- Page content -->
</tbody>
<tfoot>
<!-- Will print at the bottom of every page -->
</tfoot>
</table>
Otra opción es usar display table-header-group y table-footer-group pero la compatibilidad con varios navegadores no es excelente:
#header {
display: table-header-group;
}
#main {
display: table-row-group;
}
#footer {
display: table-footer-group;
}