Ajustar tabelas para impressão em css

Front-end CSS
#1

Senhores, 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)

ao clicar em mostrar:

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:

#2

Se não me engano, o @media print não faz o ajuste automático pra impressão, você precisa especificar isso no css de cada elemento, e de preferência usando unidades que fazem sentido pra impressão (medidas como width e margin em milímetros, fontes em pt). Algo como:

html:

<div class="papel_a4">
<table>
  <tr>
  <th>Coluna 1</th>
  <th>Coluna 2</th>
  </tr>
  <tr>
  <td>Valor 1</td>
  <td>Valor 2</td>
  </tr>
</table>
</div>

css : 

.papel_a4 {
  width: 210mm;
  height:290mm;
}

Pode dar uma olhada em como o Cifraclub formata a página para impressão pra ter uma ideia (use o inspecionar/devtools na página deles). Lembrando que é preciso atentar para elementos como margens e paddings, dentre outras coisas.

Abraço.

1 curtida
#3

Olá,
obrigado pela resposta,
Então, baseado na sua resposta eu consegui ajustando a escala de impressão pelo CSS (no size), porém as tabelas podem assumir N tamanhos, visto que são colunas variáveis (nesse caso são investimentos, um dia pode ter 1 investimento, outro dia pode ter 30).
E como cada tabela cobre uma folha ±, eu gostaria que elas se auto ajustassem no size, tem como fazer isso?

#4

Desde que a largura da página seja fixa e o conteúdo esteja configurado para permanecer dentro da página (ex: a table ter width/max-width de 100%), imagino que as colunas devem permanecer dentro da página independente da quantidade. Notando que 20 a 30 colunas numa página A4 em modo retrato vai ficar bem espremido, você vai ter que criar regras para lidar com isso, possivelmente reduzindo o tamanho da fonte ou o padding das células de acordo com a quantidade de colunas.

Não tenho como te dar uma resposta exata pois precisaria criar um monte de código aqui, então você vai ter que experimentar aí.

Abraço.