html - para - salto de pagina en word 2010

evitar el salto de página dentro de la fila de la tabla

Question

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

Answer 1

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

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

Answer 2

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://.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 las td se dividan en 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 */
  }

Parece que funciona bien en la última versión de Chrome.

Answer 3

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

Agregue una regla de 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 , 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!

Answer 4

La única forma en que encontré 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

Answer 5

La mejor manera que he encontrado para lidiar con este problema en los navegadores webkit es poner un div dentro de cada elemento td y aplicar el salto de página dentro: evitar el estilo para el div, como este:

...
<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 pesar de que Chrome supuestamente no reconoce el ''page-break-inside: avoid;'' propiedad, esto parece evitar que el contenido de la fila se divida a la mitad por un salto de página al usar wktohtml para generar archivos PDF. El elemento tr puede colgar un poco sobre el salto de página, pero el elemento div y todo lo que está dentro no.

Answer 6

Prueba con

white-space: nowrap; 

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

Answer 7

Puede probar 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 de CSS no se aplican directamente a las etiquetas <tr> , debido a exactamente lo que usted señaló anteriormente: tienen un estilo de display único, que no permite estas reglas de CSS. Sin embargo, las etiquetas <td> y <th> dentro de ellas generalmente permiten este tipo de especificación, y usted puede aplicar fácilmente tales reglas a TODOS los niños- <tr> y <td> usando CSS como se muestra arriba.

Answer 8

Utilicé el truco 4px de @AaronHill ( link ) y funcionó muy bien. Aunque utilicé una regla css más simple sin necesidad de agregar una clase a cada <td> en la tabla.

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