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*/
}