1

Estou fazendo o CSS para impressão de uma tabela, basicamente eu removo todos os elementos da página e deixo só a tabela quando a janela da impressão é aberta. Faço isso utilizando:

<link rel="stylesheet" href="/css/impressao.css" media="print" />

O problema é que quando a busca retorna mais de uma página, algumas linhas ficam nas duas(topo da letras em uma página e abase na outra):

inserir a descrição da imagem aqui

Qual melhor forma para eu resolver isso?

1 Resposta 1

1

Como não tenho o código para testar fica difícil te dar certeza absoluta como vai ficar o resultado. Mas na teoria, segundo a documentação, vc pode controlar essa fragmentação.

Cada ponto de quebra possível (em outras palavras, cada limite de elemento) é afetado por três propriedades: o break-after: valor do elemento anterior, o break-before: valor do próximo elemento e o break-inside: valor do elemento contido.

Não vou me alongar em cada uma delas, mas vc pode consultar aqui a documentação da Mozilla, que é mais amigável que a documentação da W3C

No seu caso acredito que vc não quer cortar a tabela no meio, então use a propriedade break-inside:avoid

@media print {
  table {
    break-inside: avoid;
  }
}

Ou se quiser que uma table sempre comece em uma nova página coloque

@media print {
  table {
    break-before: page;
  }
}

Minha dica é que se não der certo tente com after e before tb, pois como te disse não tenho um ambiente para testar isso. E recomendo para vc a leitura dessa artigo da Smashing Magazine, que deve te interessar e fala um pouco sobre a Fragmentação https://www.smashingmagazine.com/2018/05/print-stylesheets-in-2018/#css-fragmentation

1
  • 1
    Muito obrigado, vou ler as documentações e ver o que consigo fazer! Commented 19/03/2019 às 19:09

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 .