4

Estou desenvolvendo uma página html, para posteriormente ser impressa.

Mas ao imprimir pude perceber que a quebra de páginas no meio de tabelas, estão ficando estranhas e bruscas, como pode-se observar na imagem a seguir:

imagem para demonstração do problema

Então como eu poderia tratar para que no momento da impressão a linha da tabela pule para a próxima página ao invés de um pedaço em cada página?

Já tentei isso e isso, e não obtive sucesso.

O meu html e css de teste é esse (infelizmente não é possível ver o comportamento demonstrado no print de impressão aqui no snippet de código):

@media screen {
  h1 {
    color: red;
  }
}
@media print {
  h1 {
    color: blue;
  }
  h1.page-break {
    page-break-before: always;
  }
  tr {
    page-break-before: always;
  }
}
<h1>Page 1</h1>
<table border="1">
  <thead>
    <tr>
      <th>Column 1</th>
      <th>Column 2</th>
      <th>Column 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
      <td>Data 3</td>
    </tr>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
      <td>Data 3</td>
    </tr>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
      <td>Data 3</td>
    </tr>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
      <td>Data 3</td>
    </tr>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
      <td>Data 3</td>
    </tr>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
      <td>Data 3</td>
    </tr>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
      <td>Data 3</td>
    </tr>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
      <td>Data 3</td>
    </tr>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
      <td>Data 3</td>
    </tr>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
      <td>Data 3</td>
    </tr>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
      <td>Data 3</td>
    </tr>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
      <td>Data 3</td>
    </tr>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
      <td>Data 3</td>
    </tr>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
      <td>Data 3</td>
    </tr>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
      <td>Data 3</td>
    </tr>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
      <td>Data 3</td>
    </tr>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
      <td>Data 3</td>
    </tr>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
      <td>Data 3</td>
    </tr>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
      <td>Data 3</td>
    </tr>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
      <td>Data 3</td>
    </tr>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
      <td>Data 3</td>
    </tr>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
      <td>Data 3</td>
    </tr>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
      <td>Data 3</td>
    </tr>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
      <td>Data 3</td>
    </tr>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
      <td>Data 3</td>
    </tr>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
      <td>Data 3</td>
    </tr>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
      <td>Data 3</td>
    </tr>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
      <td>Data 3</td>
    </tr>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
      <td>Data 3</td>
    </tr>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
      <td>Data 3</td>
    </tr>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
      <td>Data 3</td>
    </tr>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
      <td>Data 3</td>
    </tr>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
      <td>Data 3</td>
    </tr>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
      <td>Data 3</td>
    </tr>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
      <td>Data 3</td>
    </tr>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
      <td>Data 3</td>
    </tr>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
      <td>Data 3</td>
    </tr>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
      <td>Data 3</td>
    </tr>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
      <td>Data 3</td>
    </tr>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
      <td>Data 3</td>
    </tr>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
      <td>Data 3</td>
    </tr>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
      <td>Data 3</td>
    </tr>
  </tbody>
</table>
<p>
  * coment of table
</p>
<h1 class="page-break">Page 2</h1>
<table>
  <thead>
    <tr>
      <th>Column 1</th>
      <th>Column 2</th>
      <th>Column 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
      <td>Data 3</td>
    </tr>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
      <td>Data 3</td>
    </tr>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
      <td>Data 3</td>
    </tr>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
      <td>Data 3</td>
    </tr>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
      <td>Data 3</td>
    </tr>
  </tbody>
</table>
<p>
  * coment of table
</p>
<h1 class="page-break">Page 3</h1>
<table>
  <thead>
    <tr>
      <th>Column 1</th>
      <th>Column 2</th>
      <th>Column 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
      <td>Data 3</td>
    </tr>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
      <td>Data 3</td>
    </tr>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
      <td>Data 3</td>
    </tr>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
      <td>Data 3</td>
    </tr>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
      <td>Data 3</td>
    </tr>
  </tbody>
</table>
<p>
  * coment of table
</p>

1
  • Vou dizer uma coisa, você não pode prever o tipo de impressora que irá imprimir, então, não tem como acertar isso para todos os casos, mas vc pode ao invés de fazer uma tabela, gerar um PDF livro para facilitar a impressão. Para impressão, dica: basei-se a resolução do que vc está fazendo em 92DPI... 6/04/2016 às 21:20

2 Respostas 2

3

Você pode utilizar estilos para previnir este comportamento:

<style type="text/css">
    table { page-break-inside:auto }
    tr    { page-break-inside:avoid; page-break-after:auto }
    thead { display:table-header-group }
    tfoot { display:table-footer-group }
</style>
6
  • 1
    Parece não funcionar aqui para mim, continua no momento da impressão quebrando na ´tr´ da tabela, imprimindo metade em cada pagina, como demonstrei no print, aparentemente esse css não mudou nada, estou fazendo algo errado? 13/02/2015 às 17:38
  • Aqui funcionou, é a solução oficial mas de fato não é compatível com todos os browsers. Uma coisa que você pode fazer, que vai tornar mais compatível, é colocar o conteúdo de cada célula dentro de uma div então aplicar page-break-inside:avoid para todas as div dentro das suas tr, desta maneira alguns browsers vão respeitar a borda da tua tr. 13/02/2015 às 17:48
  • Outras soluções mais complexas seriam usar JavaScript para quebrar sua tabela, mediante a dimensão da página, mas é terrível pois você não consegue saber o tamanho da mesma (A3, A4, A5, etc). Derivado disso tem scripts que convertem pra PDF (mas não funciona no IE8), onde se vc quiser compatibilidade terá que usar um serviço externo, onde vc manda o HTML e ele te devolve o PDF para download. 13/02/2015 às 17:54
  • Verdade, tinha testado no Chrome e não tinha mudado nada, agora testei no FireFox, e está funcionando perfeitamente, e muito legal que os thead, vai junto para a próxima pagina. Vou testar sua dica de compatibilidade. No caso seria: tbody > tr > div > td's, nessa hierarquia certo? 13/02/2015 às 17:56
  • tbody > tr > td's > div se vc colocar a div antes do td vai quebrar nos IEs (talvez no 11 funcione). no seu css vc pode ir direto pra tbody td > div. 13/02/2015 às 18:00
0

Veja se isso resolve seu caso, não garanto, coloque isso na sua folha de estilos CSS:

@media print {
    table { 
        page-break-after: always; 
    }
}

ou:

@media print {
    table { 
          page-break-inside:avoid; 
    }
}
1
  • Testei para o exemplo da pergunta e não funcionou nada além da solução de @GabrielGartz. Em que exemplo você testou e funcionou? Pode elaborar um exemplo funcional da solução? 7/04/2016 às 11:28

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .