2

Tenho uma página que apresenta quatro tabelas e um botão para que o usuário possa imprimi-las.

O problema é que essas tabelas tem uma grande quantidade de colunas e quando vou tentar imprimir, elas são cortadas.

Gostaria de poder diminuir o tamanho das tabelas para que elas coubessem na página de impressão. Alguém sabe como fazer isso?

inserir a descrição da imagem aqui Aqui já dá pra ver que a tabela não está sendo mostrada inteira na página já que a última coluna mostrada é OUT_PREV e a última coluna realm é Dez_REAL

inserir a descrição da imagem aqui E na página de impressão mesmo em modo paisagem a última coluna que está sendo mostrada é AGO_PREV e a última coluna que deveria ser mostrada é DEZ_REAL.

1
  • 1
    poste o código da tabela pra ver se conseguiremos ajudar, mas de antemão, se resolve com css... Commented 9/07/2018 às 13:02

1 Resposta 1

2

Já vou avisando que não é a solução mais "elegante", mas em último casso pode quebrar seu galho.

Com esse CSS vc vai diminuir a escala da sua tabela em 20% com scale(0.8), ou seja 80% do tamanho original. E mudando o tamanho da fonte, no caso eu coloquei font-size:9px, apenas na hora da impressão. OBS: O scale() afeta esse font-size, então será 9px - 20% do tamanho devido ao scale 0.8, mas vc pode fazer uns testes até encaixar os valores ideias para sua tabela fica com uma leiturabilidade legal.

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
@media print {
    table {
        transform: scale(0.8); /* diminui em 20% o tamanho total da tabela na impressão */
        font-size: 9px; /* diminua um pouco a fonte na hora da impressão */
    }
}
@page {
    size: landscape; /* muda a orientação da página para landscape na hora da impressão */
}
<table border="1px">
        <thead>
            <tr>
                <th>item</th>
                <th>item</th>
                <th>item</th>
                <th>item</th>
                <th>item</th>
                <th>item</th>
                <th>item</th>
                <th>item</th>
                <th>item</th>
                <th>item</th>
                <th>item</th>
                <th>item</th>
                <th>item</th>
                <th>item</th>
                <th>item</th>
                <th>item</th>
                <th>item</th>
                <th>item</th>
                <th>item</th>
                <th>item</th>
                <th>item</th>
                <th>item</th>
                <th>item</th>
                <th>item</th>
                <th>item</th>
                <th>item</th>
                <th>item</th>
                <th>item</th>
                <th>item</th>
                <th>item</th>
                <th>item</th>
                <th>item</th>
                <th>item</th>
                <th>last</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Lorem, ipsum.</td>
                <td>Lorem, ipsum.</td>
                <td>Lorem, ipsum.</td>
                <td>Lorem, ipsum.</td>
                <td>Lorem, ipsum.</td>
                <td>Lorem, ipsum.</td>
                <td>Lorem, ipsum.</td>
                <td>Lorem, ipsum.</td>
                <td>Lorem, ipsum.</td>
                <td>Lorem, ipsum.</td>
                <td>Lorem, ipsum.</td>
                <td>Lorem, ipsum.</td>
                <td>Lorem, ipsum.</td>
                <td>Lorem, ipsum.</td>
                <td>Lorem, ipsum.</td>
                <td>Lorem, ipsum.</td>
                <td>Lorem, ipsum.</td>
                <td>Lorem, ipsum.</td>
                <td>Lorem, ipsum.</td>
                <td>Lorem, ipsum.</td>
                <td>Lorem, ipsum.</td>
                <td>Lorem, ipsum.</td>
                <td>Lorem, ipsum.</td>
                <td>Lorem, ipsum.</td>
                <td>Lorem, ipsum.</td>
                <td>Lorem, ipsum.</td>
                <td>Lorem, ipsum.</td>
                <td>Lorem, ipsum.</td>
                <td>Lorem, ipsum.</td>
                <td>Lorem, ipsum.</td>
                <td>Lorem, ipsum.</td>
                <td>Lorem, ipsum.</td>
                <td>Lorem, ipsum.</td>
                <td>último ítem</td>
            </tr>
        </tbody>
    </table>

Como fica na impressão: inserir a descrição da imagem aqui


Dica:

Vc também pode habilitar a "visualização de impressão" pelo Chrome no Dev Tools conforme essa imagem. Ai fica mais fácil para vc ir ajustando seu CSS apenas no formato Print

inserir a descrição da imagem aqui

4
  • Então, a tabela na página diminiu e ficou certinha, mas quando eu vou imprimir, o tamanho da tabela não mudou. :/ Commented 9/07/2018 às 13:38
  • @MarianaFerreira aqui eu não tenho uma impressora física para imprimir no papel de fato. Mas quando salvei como PDF vei normal com a configuração do CSS direitinho.
    – hugocsl
    Commented 9/07/2018 às 13:46
  • 1
    Ah, realmente! Era só diminuir a escala no navegador também. Obrigada, sua resposta ajudou muito! Commented 9/07/2018 às 13:47
  • Tranquilo @MarianaFerreira que bom que resolvei ai :)
    – hugocsl
    Commented 9/07/2018 às 13:48

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 .