18.03.2025

Impressão de Tabelas com Qualquer Número de Linhas em CSS: Quebra de Página

Resposta Rápida

Para melhorar a legibilidade das versões impressas de tabelas extensas, use a propriedade CSS page-break-inside: avoid para os elementos tr. Isso ajudará a evitar que as linhas sejam quebradas entre diferentes páginas:

@media print {
  tr { 
    page-break-inside: avoid; 
  }
  thead { 
    display: table-header-group; 
  }
}

Essa abordagem garantirá que os cabeçalhos das tabelas apareçam em cada página e que as linhas da tabela não sejam separadas.

Conceitos Básicos do Uso das Propriedades de Quebra de Página em Tabelas

Evitando Quebras de Linha

Aplicar a propriedade page-break-inside: avoid; é crucial para manter a integridade das linhas da tabela durante a impressão.

Nova Página sem Excessos

A propriedade page-break-after: always;, usada após uma linha tr, cria uma nova página após a linha atual. No entanto, o uso frequente pode resultar em apenas uma linha sendo impressa por página, o que é ineficiente para tabelas grandes.

Compatibilidade com Navegadores

Certifique-se de verificar a compatibilidade dessa propriedade em diferentes navegadores no site “Can I use...”, pois isso pode afetar os resultados de impressão.

Soluções e Dicas Avançadas

Usando JavaScript para Gerenciar Paginação de Tabelas

JavaScript pode ser útil para controlar as quebras de página dentro das tabelas, incluindo o ajuste dinâmico das propriedades para criar quebras necessárias.

Estilizando para Impressão

Dentro de @media print, oculte elementos desnecessários, como navegação e imagens não essenciais, usando display: none.

Propriedades CSS Adicionais

Em situações específicas, propriedades como clear: both; para pseudo-elementos podem ser necessárias para gerenciar quebras ou ajustes manuais de margens.

Suporte da Comunidade

Fóruns como Salesforce for Developers oferecem soluções práticas que podem ser personalizadas para atender às suas necessidades.

Visualização

As tabelas funcionam de maneira semelhante a um trem composto por vagões, onde a propriedade de quebra de página CSS atua como estações que proporcionam transições suaves entre as páginas.

Quebras de Página Dinâmicas Usando JavaScript

Com JavaScript, crie classes CSS que apliquem quebras de página com base no número de linhas ou na altura da tabela.

Definindo Pontos de Quebra Usando Divs

Definir manualmente os pontos de quebra usando divs dá controle sobre o processo de impressão, caso o sistema automático não consiga lidar com a tarefa.

Estilos Inline vs. Estilos de Classe/ID

Evite estilos inline para quebras de página, optando por classes e IDs para manter seu código limpo.

Recursos Úteis

1. break-after - CSS | MDN — documentação CSS sobre quebras de página.
2. Guia Completo do Elemento Tabela | CSS-Tricks — exemplos para impressão de tabelas.
3. Módulo de Fragmentação CSS Nível 3 — especificação para lidar com quebras de página.
4. Problemas de Quebra de Página em Tabelas no Stack Overflow.
5. Projetando para Impressão com CSS — Smashing Magazine — diretrizes para adaptar design web.
6. page-break-after | Codrops — recurso detalhado sobre page-break-after.
7. Compatibilidade de Propriedades CSS | Can I use... — verificação de compatibilidade para navegadores.

Video

Navigation