Come applicare l'interruzione di pagina CSS per stampare una tabella con molte righe?

Question

Ho una tabella dinamica nella mia pagina web che a volte contiene un sacco di righe. So che ci sono page-break-before e page-break-after proprietà CSS. Dove li inserisco nel mio codice per forzare l'interruzione di pagina, se necessario?

Answer 1

È possibile utilizzare il seguente:

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

, consultare le specifiche del W3C CSS Print Profile per i dettagli.

E fare anche riferimento allo Salesforce developer forums.

Answer 2

Ecco un esempio:

tramite CSS:

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

o direttamente sull'elemento:

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

Answer 3

Ovunque si desidera applicare una pausa, o un table o tr, devi dare una lezione per l'ex. page-break con i CSS come di seguito indicate:

/* 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"> 

e funzionerà come richiesto

In alternativa, si può anche avere div struttura per la stessa:

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

Ho cercato una soluzione per questo. Ho un sito mobile jquery che ha una pagina di stampa finale e combina dozzine di pagine. Ho provato tutte le correzioni sopra, ma l'unica cosa che ho potuto ottenere al lavoro è questo:

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

Answer 5

Purtroppo gli esempi di cui sopra non ha funzionato per me in Chrome.

Mi è venuta in mente la soluzione di seguito in cui è possibile specificare l'altezza massima in PX di ciascuna pagina. In questo modo, la tabella verrà divisa in tabelle separate quando le righe saranno uguali a tale altezza.

$(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(); 

}); 

Sarà inoltre necessario il seguito nel foglio di stile

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

Answer 6

questo sta lavorando per me:

<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> 

Da questa discussione: avoid page break inside row of table