evitar saltos de página dentro de la fila de la tabla


97

Quiero evitar el salto de página dentro de la fila de la tabla en html, cuando convierto html a PDF por wkhtmltopdf. Yo uso page-break-inside: evitar con table- funciona, pero tengo tantas filas, entonces no funciona. Si establece la visualización de tr como bloque o alguna otra cosa, entonces cambia el formato de la tabla e inserta un borde doble. O es posible insertar el encabezado de la tabla en cada página, donde se dividió la tabla.


1
Lo siento, ¿cuál es el problema al usarlo page-break-inside: avoid;?
Christian

2
@ChristianVarga cuando uso page-break-inside: evitar con tr, no funciona
Ankit Mittal

1
La página que se rompe con tablas tiene muchos errores. Eche un vistazo a esta solución de JavaScript code.google.com/p/wkhtmltopdf/issues/detail?id=168#c4
Jona

2
de hecho lo he intentado page-break-inside:avoidcon todos los elementos de la tabla como tr td, pero no funcionó.
Ankit Mittal

3
Bien, Google para WebGL, javascript rápido y deslumbrante, cliente nativo portátil, pero todavía no podemos imprimir tablas de datos. ¿Quién necesitaría hacer eso ??? Solo casi todas las empresas del mundo. Por cierto, traté de imprimir una hoja de cálculo en documentos de Google hace un momento, y constantemente bloquea mi Chrome. Creo que google docs imprime a través de pdf. : /
Sam Watkins

Respuestas:


74

Puede intentar esto con CSS:

<table class="print-friendly">
 <!-- The rest of your table here -->
</table>

<style>
    table.print-friendly tr td, table.print-friendly tr th {
        page-break-inside: avoid;
    }
</style>

La mayoría de las reglas CSS no se aplican a las <tr>etiquetas directamente, debido exactamente a lo que señaló anteriormente: tienen un displayestilo único , que no permite estas reglas CSS. Sin embargo, el <td>y <th>etiquetas dentro de ellos por lo general lo hacen permitir que este tipo de especificación - y se puede aplicar fácilmente a tales reglas TODO niño- <tr>'s y <td>' s el uso de CSS como se muestra arriba.


18
Desafortunadamente, esto (todavía) no funciona con navegadores basados ​​en webkit.
Attila Fulop

2
Sí, hay algunas rarezas. Vea la respuesta de @ Peter en esta pregunta: stackoverflow.com/questions/7706504/… para obtener más información.
Troy Alford

3
Solo funciona si toma la tabla completa, no solo tr / td: stackoverflow.com/a/13525758/729324
marcovtwout

1
Me he encontrado con problemas con esto en IE8, posiblemente en otros, donde hace que toda la tabla intente encajar en una página y corta cualquier desbordamiento. También pareció ignorar la opción "escalar para ajustar" para estas tablas.
Tom Pietrosanti

6
@AttilaFulop ¿Todavía? Tu publicación tiene 3 años y todavía no puedo hacer que funcione. Gracias
relipse

32

La mejor manera que he encontrado para lidiar con este problema en los navegadores webkit es colocar un div dentro de cada elemento td y aplicar el page-break-inside: evitar el estilo al div, así:

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

Aunque Chrome supuestamente no reconoce el 'salto de página dentro: evitar;' propiedad, esto parece evitar que el contenido de la fila se divida por la mitad por un salto de página cuando se usa wktohtml para generar archivos PDF. El elemento tr puede colgar un poco sobre el salto de página, pero el div y cualquier cosa dentro de él no.


El margin: 4px 0 4px 0;hizo el truco para mí, que estaba perdiendo un registro de vez en cuando. Gracias
Wartodust

Un problema con este enfoque es que a veces solo unas pocas celdas de una fila se dividen en la página siguiente, aunque cada celda por sí sola no se romperá.
WorldSEnder

@WorldSEnder Sí. ¿Encontraste una solución alternativa para esto?
ranjansaga

4
No funciona. Nada funciona. Probé todas las "soluciones" en Internet y no hay solución. Solo tenemos que aceptar un software de mierda que ni siquiera puede representar una tabla.
Niklas R.

17

Usé el truco de 4px de @AaronHill arriba ( enlace ) y ¡funcionó muy bien! Utilicé una regla CSS más simple sin necesidad de agregar una clase a cada una <td>en la tabla.

@media print {
    table tbody tr td:before,
    table tbody tr td:after {
        content : "" ;
        height : 4px ;
        display : block ;
    }
}

10

Encontré una nueva forma de resolver este problema, al menos para mí (versión de Chrome 63.0.3239.84 (compilación oficial) (64 bits) en MacOS Sierra)

Agregue una regla CSS a la tabla principal:

table{
    border-collapse:collapse;
}

y para el td:

tr td{
    page-break-inside: avoid;
    white-space: nowrap;
}

De hecho, encontré esta solución en Stack Overflow, pero no apareció en las búsquedas iniciales de Google: CSS para detener el salto de página dentro de la fila de la tabla

¡Felicitaciones a @ Ibrennan208 por resolver el problema!


su problema resuelto de la fila de la mesa de corte su ruptura con otro diseño
aviboy2006

9

El uso de CSS page-break-inside no funcionará (este es un problema del navegador webkit).

Hay un truco de división de tablas de JavaScript wkhtmltopdf que divide una tabla larga en tablas más pequeñas automáticamente según el tamaño de página que especifique (en lugar de saltos de página después de un valor estático de x filas): https://gist.github.com/3683510


¿Este truco js funcionará si solo quiero imprimir una página web sin wkhtmltopdf?
120196

Este es el único que funcionó para mí. También funciona con la biblioteca HTML-PDF.
gilbert-v

8

Escribí el siguiente JavaScript basado en la respuesta de Aaron Hill:

//Add a div to each table cell so these don't break across pages when printed
//See http://stackoverflow.com/a/17982110/201648
$(document).ready(function () {
    var ctlTd = $('.dontSplit td');
    if (ctlTd.length > 0)
    {
        //console.log('Found ctlTd');
        ctlTd.wrapInner('<div class="avoidBreak" />');
    }
});

Donde dontSplit es la clase de la tabla en la que no desea que los td se dividan en las páginas. Use esto con el siguiente CSS (nuevamente, atribuido a Aaron Hill):

 .avoidBreak {
    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 */
  }

Esto parece funcionar bien en la última versión de Chrome.


1
Estoy renderizando tablas grandes en formato PDF usando wkhtmltopdf, y esta es la única solución que arrojó resultados aceptables. Podría ser mejor (Webkit no repite los bordes de las celdas después de un salto de página), pero al menos el contenido está ahí. ¡Gracias!
Jonathon Hill

7

La única forma que encontré para trabajar fue colocar cada elemento TR dentro de su propio elemento TBODY y aplicar las reglas de salto de página al elemento TBODY a través de css


1
Esto funciona mejor que el resto para mí en Chromium Versión 40.0.2214.111 (64 bits) en Arch Linux. Es feo y se siente hacky, pero aparentemente varios tbodyelementos son válidos dentro de un table stackoverflow.com/questions/3076708/…
ElDog

Esto no me funciona (Chrome 56.0.2924.87 (64 bits), Mac OS 10.12.2).
Nhat Dinh

4

Prueba con

white-space: nowrap; 

estilo a td para evitar que se rompa en nuevas líneas.


1
Mucho más simple que las otras soluciones. ¿Es esto algo nuevo?
bendecko

3

Descubrí que page-break-inside: avoidno funcionará si alguno de los elementos principales de la tabla es display: inline-blocko flex. Asegúrese de que todos los elementos principales sean display: block.

Considera también anulando table, tr, td's displayestilos con CSS gridpara el diseño de impresión Si sigue teniendo problemas con la tabla.


2

La solución 2020

Lo único que pude hacer funcionar consistentemente en todos los navegadores es poner cada fila dentro de su propio elemento de tabla . Esto también funciona con el nodo HTML-PDF. Luego, configure todo en page-break-inside: avoid.

table,
tr,
td,
div {
    page-break-inside: avoid;
}

La única desventaja de esto es que debe establecer manualmente el ancho de las columnas, de lo contrario se verá bastante extraño. Lo siguiente funcionó bien para mí con dos columnas.

td:first-child { width: 30% }
td:last-child { width: 70% }


Ejemplo

<table>
  <tr>
    <td>Forename</td>
    <td>John</td>
  </tr>
</table>
<table>
  <tr>
    <td>Surname</td>
    <td>Piper</td>
  </tr>
</table>
<table>
  <tr>
    <td>Website</td>
    <td>desiringgod.org</td>
  </tr>
</table>

¿Podría proporcionar un HTML de tabla de ejemplo? Gracias.
PavanBhushan

Gracias, @ gilbert-v por la edición con el ejemplo. Intentaré esto.
PavanBhushan hace
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.