Ajustar Tabelas para impressão

JhownGangrena
(usa Ubuntu)

Enviado em 31/07/2024 - 11:30h

Senhores, sou novo no forum e em programação e estou precisando de um ajuda em css.
Estou precisando ajustar algumas tabelas para impressão, elas precisam caber na folha independente do tamanho delas.
cada tabela é formada por outras 3 tabelas, uma delas é escondida para fins de melhor apresentação visual.
ex da parte apenas das tabelas:

<div class="container" style="display: block;">
    <h2>TITULO DO ARQUIVO</h2>
    <div class="segment">
        <details open="">
            <summary>Renda Fixa</summary>
            <div class="invest">
                <details open="">
                    <summary class="invest-summary">Fundos de Investimento</summary>
                    <div class="the-summary-content">
                    
                        <div class="table_pandas">
                            <table border="1" class="dataframe table">
                            </table>
                            <details>
                                <summary>Mostrar</summary>
                                <div class="hidden-rows">
                                    <table border="1" class="dataframe hidden">
                                    </table>
                                </div>
                            </details>
                            <table border="1" class="dataframe table">
                            </table>
                        </div>
                    </div>
                </details>
            </div>
        </details>
    </div>
</div>
 

o que me gera uma tabela mais ou menos assim (ignorar bugs pq injetei dados ficticios)
https://i.imgur.com/R8Hahwf.png
ao clicar em mostrar:
https://i.imgur.com/GPWiD7z.png

preciso preparar apenas essas tabelas para impressão, eu pensei na seguinte forma em css:

@media print {
    body * {
        visibility: hidden;
    }
    .container, .container * {
        visibility: visible;
        color: black;
        font-family: 'Times New Roman', serif;
        text-shadow: none;
        border-color: black;
        box-shadow: none;
    }
    .container summary {
        visibility: hidden;
    }

}
 

porém as tabelas ficam assim cortadas:
https://i.imgur.com/RMPAnxd.png

fabio
(usa Debian)

Enviado em 31/07/2024 - 12:57h

Dando uma olhada rápida, pode ser que o problema esteja nesse "display: block" aí. Tente usar o flex com um max-width: 100%.

fabio
(usa Debian)

Enviado em 31/07/2024 - 13:09h

Ah, e só lembrando que o ideal é evitar o inline-style. Defina o display e max-width no arquivo CSS sempre que possível.

JhownGangrena
(usa Ubuntu)

Enviado em 31/07/2024 - 13:20h

consegui abrir o programa do gerador do html e mudar para display: flex como vc disse, mas isso só desformatou a parte principal, não mudou o tamanho da tabela para caber na folha.

Buckminster
(usa Debian)

Enviado em 05/08/2024 - 10:52h

Precisaria ver mais do código, mas tenta acrescentar a linha como abaixo:

@media print {
body * {
visibility: hidden;
}
.container, .container * {
visibility: visible;
color: black;
font-family: 'Times New Roman', serif;
text-shadow: none;
border-color: black;
box-shadow: none;
}
.container summary {
visibility: hidden;
}
@page{size: auto; margin: 0mm;} <<< acrescente essa linha nessa posição
}

A linha dirá para os navegadores que o tamanho da página na impressão deve ser auto-ajustável e as margens 0. Talvez, dependendo do navegador, tu terá de ajustar as margens de acordo com cada navegador, mas daí tu testa.
https://anafe.org.br/wp-content/uploads/2016/10/balancete1.pdf



_________________________________________________________
Always listen the Buck!
Enquanto o cursor estiver pulsando, há vida!

JhownGangrena
(usa Ubuntu)

Enviado em 05/08/2024 - 11:38h

Bom dia, obrigado pelas respostas, consegui resolver da seguinte maneira:
@page {
margin: 1cm;
size: auto;
}
@media print {
body * {
visibility: hidden;
font-family: 'Times New Roman', serif;
color: black;
text-shadow: none;
border: none;
border-color: black;
}

.container, .container * {
visibility: visible;
box-shadow: none;
page-break-inside: avoid; /* Evita quebra de página dentro do container */
}

.container {
page-break-after: always; /* Adiciona uma quebra de página após cada container para evitar desformatação de titulo*/
}