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.

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.

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.

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

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!

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

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.

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

Prueba con

white-space: nowrap; 

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

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.

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>