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

Question

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

Answer 1

Usted puede usar la siguiente:

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

Consulte la especificación del W3C CSS Print Profile para más detalles.

Y también remítase al Salesforce developer forums.

Answer 2

Aquí se muestra 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 sobre el elemento:

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

Answer 3

Dondequiera que desea aplicar un descanso, ya sea un table o tr, necesitas dar una clase por ej. page-break con CSS como se mencionan 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 requiere

Alternativamente, también puede tener div estructura para la misma:

CSS:

@media all { 
.page-break { display: none; } 
} 

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

Div :

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

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. He intentado todas las revisiones de arriba, pero la única cosa que podría llegar al trabajo es la siguiente:

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

Answer 5

Desafortunadamente los ejemplos anteriores no funcionó para mí en Chrome.

Se me ocurrió la siguiente solució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 tendrá el siguiente en la hoja de estilos

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

Answer 6

esto está funcionando 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> 

A partir de este hilo: avoid page break inside row of table