Imprimir tablas html, evitando que las filas abarquen varias páginas

Question

Nov 24, 2017, 07:37 PM

Imprimir tablas html, evitando que las filas abarquen varias páginas

Genero html mediante programación para que se renderice bien para imprimir.

Tengo que imprimir tablas que pueden abarcar varias páginas. Esto plantea algunos desafíos, como evitar que el contenido celular se extienda en dos páginas como esta:

Encontré una solución enesta respuesta, que utilizapage-break-inside:avoid, junto conesta respuesta, que utilizadisplay: block Para el<tr> elementos para evitar que se dividan verticalmente.

Sin embargo, esto también hace que las filas ya no se alineen verticalmente entre sí. ¿Cómo arreglo eso?

Así es como debería verse (y cómo el navegador lo muestra en pantalla):

Y esto es lo que representa para imprimir:

¿Cómo hago que la impresión esté alineada, de la misma manera que está alineada en la pantalla, sin tener que perder eldisplay: block capacidad de mantener las celdas verticalmente intactas en los saltos de página? Tiene que funcionar en Webkit (Safari) en macOS.

Aquí está el código html completo. Abarca dos páginas para que uno pueda verificar si las celdas individuales aparecen mitad en una y media en la página siguiente (que no se desea):

<!DOCTYPE html><html><head><meta charset="utf-8"><style type="text/css">
th, td { border: 1px solid #aaa; }
@media print {
  table, tr, td, th {
    page-break-inside: avoid;
  }
  tr {
    display: block;
    page-break-before: auto;
  }
}
</style></head>
<body>
<table style="width:40%">
  <tr><th>A</th><th>B</th><th>C</th></tr>
  <tr><td>more text<br>1<br>2<br>3<br>4<br>5<br></td><td>more text</td><td>more text</td></tr>
  <tr><td>1<br>2<br>3<br>4<br>5<br>6<br></td><td>x</td><td>x</td></tr>
  <tr><td>1<br>2<br>3<br>4<br>5<br>6<br></td><td>x</td><td>x</td></tr>
  <tr><td>1<br>2<br>3<br>4<br>5<br>6<br></td><td>x</td><td>x</td></tr>
  <tr><td>1<br>2<br>3<br>4<br>5<br>6<br></td><td>x</td><td>x</td></tr>
  <tr><td>1<br>2<br>3<br>4<br>5<br>6<br></td><td>x</td><td>x</td></tr>
  <tr><td>1<br>2<br>3<br>4<br>5<br>6<br></td><td>x</td><td>x</td></tr>
  <tr><td>1<br>2<br>3<br>4<br>5<br>6<br></td><td>x</td><td>x</td></tr>
  <tr><td>1<br>2<br>3<br>4<br>5<br>6<br></td><td>x</td><td>x</td></tr>
  <tr><td>1<br>2<br>3<br>4<br>5<br>6<br></td><td>x</td><td>x</td></tr>
</table>
</body></html>

Actualizar:

También intentéesta solución que usadiv en lugar detable. Esto da resultados ligeramente diferentes al imprimir, pero sigue siendo malo (ahora las alturas de las celdas también son incorrectas):