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 .