html - que - ¿Cómo aplicar CSS salto de página para imprimir una tabla con muchas filas?

salto de pagina en html para imprimir

Question

Tengo una tabla dinámica en mi página web que a veces contiene muchas filas. Sé que hay propiedades de page-break-after page-break-before y page-break-after . ¿Dónde los pongo en mi código para forzar el salto de página si es necesario?

Answer 1

Aquí hay un ejemplo:

A través de css:

<style>
.my-table {
page-break-before: always;
page-break-after: always;
}
.my-table tr {
page-break-inside: avoid;
}
</style>

o directamente en el elemento:

<table style="page-break-before: always; page-break-after: always;">
<tr style="page-break-inside: avoid;">
..
</tr>
</table>

Answer 2

Donde quiera que quiera aplicar un descanso, ya sea una table o tr , necesita dar una clase por ej. page-break con CSS como se menciona a continuación:

/* class works for table row */
table tr.page-break{
page-break-after:always
}
<tr class="page-break">
/* class works for table */
table.page-break{
page-break-after:always
}
<table class="page-break">

y funcionará como lo requirió

Alternativamente, también puede tener estructura div para el mismo:

CSS:

@media all {
.page-break { display: none; }
}
@media print {
.page-break { display: block; page-break-before: always; }
}

Div:

<div class="page-break"></div>

Answer 3

Esto es trabajo para mí:

<td>
<div class="avoid">
Cell content.
</div>
</td>
...
<style type="text/css">
.avoid {
page-break-inside: avoid !important;
margin: 4px 0 4px 0; /* to keep the page break from cutting too close to the text in the div */
}
</style>

De este hilo: evita el salto de página dentro de la fila de la tabla

Answer 4

He buscado una solución para esto. Tengo un sitio móvil de jquery que tiene una página de impresión final y combina docenas de páginas. Intenté todas las soluciones anteriores, pero lo único que pude hacer fue:

<div style="clear:both!important;"/></div>
<div style="page-break-after:always"></div>
<div style="clear:both!important;"/> </div>

Answer 5

Lamentablemente, los ejemplos anteriores no me funcionaron en Chrome.

Se me ocurrió la solución a continuación donde puede especificar la altura máxima en PX de cada página. Esto dividirá la tabla en tablas separadas cuando las filas sean iguales a esa altura.

$(document).ready(function(){
var MaxHeight = 200;
var RunningHeight = 0;
var PageNo = 1;
$(''table.splitForPrint>tbody>tr'').each(function () {
if (RunningHeight + $(this).height() > MaxHeight) {
RunningHeight = 0;
PageNo += 1;
}
RunningHeight += $(this).height();
$(this).attr("data-page-no", PageNo);
});
for(i = 1; i <= PageNo; i++){
$(''table.splitForPrint'').parent().append("<div class=''tablePage''><hr /><table id=''Table" + i + "''><tbody></tbody></table><hr /></div>");
var rows = $(''table tr[data-page-no="'' + i + ''"]'');
$(''#Table'' + i).find("tbody").append(rows);
}
$(''table.splitForPrint'').remove();
});

También necesitarás lo siguiente en tu hoja de estilo

 div.tablePage {
page-break-inside:avoid; page-break-after:always;
}

Answer 6

Puedes usar lo siguiente:

<style type="text/css">
table { page-break-inside:auto }
tr { page-break-inside:avoid; page-break-after:auto }
</style>

Consulte la especificación de perfil de impresión CSS del W3C para más detalles.

Y también consulte los foros de desarrolladores de Salesforce .