19.12.2024

Evitando Quebras de Página nas Linhas de Tabelas HTML ao Imprimir PDF

Resposta Rápida

Se você deseja evitar quebras de linha em tabelas que se estendem por diferentes páginas ao imprimir, utilize a propriedade CSS page-break-inside: avoid; no elemento tr:

tr { page-break-inside: avoid; }

Dessa forma, cada linha será tratada como um bloco indivisível, permanecendo intacta em uma única página.

Vamos explorar mais profundamente este tópico, analisando formas de aprimorar essa abordagem e garantir um resultado de impressão mais profissional, além de examinar exemplos típicos.

CSS e Impressão: Uma Simbiose Perfeita

Podemos melhorar a percepção de documentos impressos criando uma classe específica para impressão e aplicando regras de estilo a ela:

@media print {
  .print-friendly tr { page-break-inside: avoid; }
}

Tratando Tabelas Complexas

Para tabelas complexas, uma abordagem mais rigorosa é necessária para manter a estrutura e a estética na versão impressa:

1. Bordas Harmoniosas: Para deixar as bordas da tabela perfeitas, aplique border-collapse: collapse;.

2. Conteúdo Adequado: Adicionar white-space: nowrap; às células da tabela evitará quebras de linha e envolturas de texto.

3. Processo de Impressão Flexível: Dentro da consulta de mídia @media print, você pode alterar as propriedades de exibição do elemento tr. No entanto, evite valores como inline-block ou flex, pois podem desestruturar a tabela.

4. Especificidades do Navegador: Cada navegador, inclusive o Chrome, possui propriedades para gerenciar quebras de página. Testar regularmente a impressão em diferentes navegadores ajudará a evitar inconvenientes inesperados.

CSS Combinado para Layouts de Impressão Otimizados

Para melhorar os layouts de impressão, você pode combinar propriedades CSS junto com page-break-inside: avoid:

• Adeus, Duplicação: Pseudo-elementos com altura de 4 pixels ajudam a evitar duplicação de bordas que pode ocorrer durante a impressão.

@media print {
  .print-friendly tr:before,
  .print-friendly tr:after {
    content: "";
    display: block;
    height: 4px;
  }
}

• Mantendo a Integridade do Fluxo: Um div embutido em td usando page-break-inside: avoid e adicionando margens mantém o espaço livre de interrupções próximo ao texto.

@media print {
  .print-friendly td div { margin: 4px; }
}

Encontrando um Novo Mundo de CSS

Para aqueles que adoram experimentar, utilizar CSS Grid para criar layouts para impressão é uma boa opção:

@media print {
  .print-grid-container {
    display: grid;
  }
}

Ao usar Grid para imprimir dados dinâmicos, proceda com cautela e verifique constantemente os resultados para evitar efeitos colaterais inesperados.

Visualização

Vamos visualizar o resultado:

Antes: A linha da tabela 📄 quebra na borda da página 📄
Depois: A linha da tabela 📄 se encaixa completamente na página 📄

As seguintes propriedades são aplicáveis:

tr { display: block; page-break-inside: avoid; }

Como Lidar com Tabelas Divididas em Páginas com Cabeçalhos Repetidos

Repetir cabeçalhos em cada nova página ao imprimir tabelas de múltiplos usos é fundamental para uma boa legibilidade. É como um farol guiando o caminho:

thead { display: table-header-group; }

Recursos Úteis

1. page-break-inside - CSS | MDN
2. break-inside | CSS-Tricks
3. CSS Paged Media Module Level 3
4. Design para Impressão com CSS — Smashing Magazine
5. break-after - CSS | MDN
6. CSS para Páginas Amigas da Impressão — SitePoint
7. Guia CSS | DigitalOcean

Video

Navigation