Imprimir tabelas html, impedindo que as linhas se espalhem por várias páginas

Question

Nov 24, 2017, 07:37 PM

Imprimir tabelas html, impedindo que as linhas se espalhem por várias páginas

Gero html programaticamente para que seja renderizado de maneira adequada para impressão.

Eu tenho que imprimir tabelas que podem abranger várias páginas. Isso apresenta alguns desafios, como impedir que o conteúdo da célula se espalhe por duas páginas como esta:

Eu encontrei uma solução emesta resposta, que usapage-break-inside:avoid, junto comesta resposta, que usadisplay: block para o<tr> elementos para impedir que eles se dividam verticalmente.

No entanto, isso também faz com que as linhas não se alinhem mais na vertical. Como faço para corrigir isso?

Aqui está como ele deve ficar (e como o navegador o exibe na tela):

E aqui está o que ele renderiza para impressão:

Como alinhar a impressão, a mesma como está alinhada na tela, sem precisar perder odisplay: block capacidade de manter as células verticalmente intactas nas quebras de página? Ele deve funcionar no Webkit (Safari) no macOS.

Aqui está o código html completo. Ele abrange duas páginas para que se possa verificar se células individuais aparecem metade em uma e outra na página seguinte (o que não é desejado):

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

Atualizar:

Eu também tenteiesta solução que usadiv ao invés detable. Isso fornece resultados ligeiramente diferentes ao imprimir, mas ainda é ruim (agora as alturas das células também estão erradas):