que - Cómo tratar los saltos de página al imprimir una tabla HTML grande
imprimir el contenido de un div que mantenga los estilos (11)
Tengo un proyecto que requiere imprimir una tabla HTML con muchas filas.
Mi problema es la forma en que se imprime la tabla en varias páginas. Algunas veces cortará una fila por la mitad, haciéndola ilegible porque una mitad está en el borde de sangrado de una página y el resto está impreso en la parte superior de la página siguiente.
La única solución plausible que se me ocurre es usar DIV apilados en lugar de una tabla y forzar saltos de página si es necesario ... pero antes de pasar por todo el cambio pensé que podría preguntar aquí antes.
Bueno chicos ... La mayoría de las soluciones aquí no funcionaron. Así es como funcionaron las cosas para mí.
HTML
<table>
<thead>
<tr>
<th style="border:none;height:26px;"></th>
<th style="border:none;height:26px;"></th>
.
.
</tr>
<tr>
<th style="border:1px solid black">ABC</th>
<th style="border:1px solid black">ABC</th>
.
.
<tr>
</thead>
<tbody>
//YOUR CODE
</tbody>
</table>
El primer conjunto de encabezados se usa como uno ficticio para que no falte un borde superior en el segundo encabezado (es decir, el encabezado original) durante el salto de página.
Expansión de la solución Sinan Ünür:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Test</title>
<style type="text/css">
table { page-break-inside:auto }
div { page-break-inside:avoid; } /* This is the key */
thead { display:table-header-group }
tfoot { display:table-footer-group }
</style>
</head>
<body>
<table>
<thead>
<tr><th>heading</th></tr>
</thead>
<tfoot>
<tr><td>notes</td></tr>
</tfoot>
<tr>
<td><div>Long<br />cell<br />should''nt<br />be<br />cut</div></td>
</tr>
<tr>
<td><div>Long<br />cell<br />should''nt<br />be<br />cut</div></td>
</tr>
<!-- 500 more rows -->
<tr>
<td>x</td>
</tr>
</tbody>
</table>
</body>
</html>
Parece que page-break-inside:avoid en algunos navegadores solo se toma en consideración para los elementos de bloque, no para celda, tabla, fila ni bloque en línea.
Si intenta display:block la etiqueta TR , y use la opción page-break-inside:avoid , funciona, pero se complica con el diseño de su tabla.
He intentado todas las sugerencias dadas anteriormente y encontré una solución de navegador cruzada simple y funcional para este problema. No hay estilos o saltos de página necesarios para esta solución. Para la solución, el formato de la tabla debe ser como:
<table>
<thead> <!-- there should be <thead> tag-->
<td>Heading</td> <!--//inside <thead> should be <td> it should not be <th>-->
</thead>
<tbody><!---<tbody>also must-->
<tr>
<td>data</td>
</tr>
<!--100 more rows-->
</tbody>
</table>
Por encima del formato probado y funcionando en navegadores cruzados.
La respuesta aceptada no funcionó para mí en todos los navegadores, pero el siguiente css funcionó para mí:
tr
{
display: table-row-group;
page-break-inside:avoid;
page-break-after:auto;
}
La estructura html era:
<table>
<thead>
<tr></tr>
</thead>
<tbody>
<tr></tr>
<tr></tr>
...
</tbody>
</table>
En mi caso, hubo algunos problemas adicionales con el thead tr , pero esto resolvió el problema original de evitar que las filas de la tabla se rompieran.
Debido a los problemas de encabezado, al final terminé con:
#theTable td *
{
page-break-inside:avoid;
}
Esto no evitó que las filas se rompieran; sólo el contenido de cada celda.
Ninguna de las respuestas aquí funcionó para mí en Chrome. AAverin en GitHub ha creado algunos Javascript útiles para este propósito y esto funcionó para mí:
Simplemente agregue el js a su código y agregue la clase ''splitForPrint'' a su tabla, dividirá la tabla en varias páginas y agregará el encabezado de la tabla a cada página.
Nota: cuando use el salto de página siguiente: siempre para la etiqueta, se creará un salto de página después del último bit de la tabla, ¡creando una página completamente en blanco al final cada vez! Para solucionarlo, simplemente cámbielo a salto de página: auto. Se romperá correctamente y no creará una página en blanco adicional.
<html>
<head>
<style>
@media print
{
table { page-break-after:auto }
tr { page-break-inside:avoid; page-break-after:auto }
td { page-break-inside:avoid; page-break-after:auto }
thead { display:table-header-group }
tfoot { display:table-footer-group }
}
</style>
</head>
<body>
....
</body>
</html>
Recientemente resolví este problema con una buena solución.
CSS :
.avoidBreak {
border: 2px solid;
page-break-inside:avoid;
}
JS :
function Print(){
$(".tableToPrint td, .tableToPrint th").each(function(){ $(this).css("width", $(this).width() + "px") });
$(".tableToPrint tr").wrap("<div class=''avoidBreak''></div>");
window.print();
}
¡Funciona de maravilla!
Revisé muchas soluciones y nadie estaba funcionando bien.
Así que probé un pequeño truco y funciona:
pie con estilo: position: fixed; bottom: 0px; position: fixed; bottom: 0px; se coloca en la parte inferior de la última página, pero si el pie de página es demasiado alto, se superpone con el contenido de la tabla.
tfoot with only: display: table-footer-group; no se superpone, pero no está en la parte inferior de la última página ...
Pongamos dos pies:
TFOOT.placer {
display: table-footer-group;
height: 130px;
}
TFOOT.contenter {
display: table-footer-group;
position: fixed;
bottom: 0px;
height: 130px;
}
<TFOOT class=''placer''>
<TR>
<TD>
<!-- empty here
-->
</TD>
</TR>
</TFOOT>
<TFOOT class=''contenter''>
<TR>
<TD>
your long text or high image here
</TD>
</TR>
</TFOOT>
Un lugar de reservas en las páginas que no son las últimas, y el segundo en su pie de página.
Terminé siguiendo el enfoque de @vicenteherrera, con algunos ajustes (que posiblemente sean específicos de bootstrap 3).
Básicamente; no podemos romper tr s, o td s porque no son elementos a nivel de bloque. Así que incrustamos div s en cada uno, y aplicamos nuestras reglas page-break-* contra el div . En segundo lugar; agregamos un poco de relleno en la parte superior de cada uno de estos divs, para compensar cualquier artefacto de estilo.
<style>
@media print {
/* avoid cutting tr''s in half */
th div, td div {
margin-top:-8px;
padding-top:8px;
page-break-inside:avoid;
}
}
</style>
<script>
$(document).ready(function(){
// Wrap each tr and td''s content within a div
// (todo: add logic so we only do this when printing)
$("table tbody th, table tbody td").wrapInner("<div></div>");
})
</script>
Los ajustes de margen y relleno fueron necesarios para compensar algún tipo de jitter que se estaba introduciendo (a mi parecer, desde bootstrap). No estoy seguro de que esté presentando ninguna solución nueva de las otras respuestas a esta pregunta, pero creo que esto ayudará a alguien.
Utilice estas propiedades CSS:
page-break-after
page-break-before
Por ejemplo:
<html>
<head>
<style>
@media print
{
table {page-break-after:always}
}
</style>
</head>
<body>
....
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Test</title>
<style type="text/css">
table { page-break-inside:auto }
tr { page-break-inside:avoid; page-break-after:auto }
thead { display:table-header-group }
tfoot { display:table-footer-group }
</style>
</head>
<body>
<table>
<thead>
<tr><th>heading</th></tr>
</thead>
<tfoot>
<tr><td>notes</td></tr>
</tfoot>
<tbody>
<tr>
<td>x</td>
</tr>
<tr>
<td>x</td>
</tr>
<!-- 500 more rows -->
<tr>
<td>x</td>
</tr>
</tbody>
</table>
</body>
</html>