CSS Expandir tabela dentro de conteiner para uma folha A4

[Swalls]

Boa tarde, Peguei umas tabelas em html puro e Preciso de ajuda para imprimir essas tabelas no tamanho da folha A4.

basicamente essa tabela começa com a tag <table> e metade (respectivamente o meio) dela está escondida na tag <detail>, ficando uma especie de tabela expansiva.

eu tentei o seguinte para deixa-la no tamanho A4:

@page {
    size: A4;
    margin: 1cm;
}
@media print {
    table {
        width: 100%;
        max-width: 100%;
        border-collapse: collapse;
        table-layout: fixed;
        word-wrap: break-word;
    }

    th, td {
        border: 1px solid #ddd;
        padding: 8px;
        text-align: left;
		text-size-adjust: auto;
        white-space: normal;
    }
}

 

porém o conteudo dentro do detail não sofre mudanças, desalinhando a tabela. (conteudo escondido para segurança)

 

[Duncan]

Boa tarde!
Pode nos mostrar como está a estrutura html até chegar nessas tabelas?

 

[Swalls]

@Duncan bom dia, desculpe a demora, é que no fim de semana não tenho acesso às tabelas.
´pelo que percebi é uma junção de 3 tabelas que ficam como uma,

uma no inicio.

uma no meio, escondida pelo detail.

uma no final.

 

 

Essa parte escondida, que mesmo sendo da classe table, não está sofrendo "resize" para a folha A4.

[Duncan]

Talvez essas divs que seguram as tabelas estão impedindo que fiquem em 100%
você não prefere criar um outro arquivo, para impressão, somente com a tabela?

[Swalls]

@Duncan boa noite,

como eu faria isso? puxo os objetos de tag table pelo javascript e insiro numa guia? tem como?

[Duncan]

deve ter.
porque não cria uma view só para impressão?
Essa daí seria para visualização.
Quando clicar em imprimir, imprime a view própria para impressão.

[DiF]

@Swalls @Duncan  Na verdade  dá para manipular os elementos via CSS respeitando a hierarquia.

 

Por exemplo:

<div class="inv">
<details open>
  <summary class="inv-summary">
    "Conteudo da tabelas"
  </summary>
  <div class="the-summary-content">
    <div class="table_pandas">
      <table border="1" class="dat table">
        <thead>
          <tr>
            <th>Month</th>
            <th>Savings</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>January</td>
            <td>$100</td>
          </tr>
          <tr>
            <td>February</td>
            <td>$80</td>
          </tr>
        </tbody>
      </table>
      <details open>
        <summary>

          "Mostrar tudo"
        </summary>
        <div class="hidden-rows">
          <table border="1" class="dataframe hidden">
            <tbody>
              <tr>
                <td>January</td>
                <td>$100</td>
              </tr>
              <tr>
                <td>February</td>
                <td>$80</td>
              </tr>
              <tr>
                <td>January</td>
                <td>$100</td>
              </tr>
              <tr>
                <td>February</td>
                <td>$80</td>
              </tr>
              <tr>
                <td>January</td>
                <td>$100</td>
              </tr>
              <tr>
                <td>February</td>
                <td>$80</td>
              </tr>
              <tr>
                <td>January</td>
                <td>$100</td>
              </tr>
              <tr>
                <td>February</td>
                <td>$80</td>
              </tr>
              <tr>
                <td>January</td>
                <td>$100</td>
              </tr>
              <tr>
                <td>February</td>
                <td>$80</td>
              </tr>
              <tr>
                <td>January</td>
                <td>$100</td>
              </tr>
              <tr>
                <td>February</td>
                <td>$80</td>
              </tr>
              <tr>
                <td>January</td>
                <td>$100</td>
              </tr>
              <tr>
                <td>February</td>
                <td>$80</td>
              </tr>
              <tr>
                <td>January</td>
                <td>$100</td>
              </tr>
              <tr>
                <td>February</td>
                <td>$80</td>
              </tr>
              <tr>
                <td>January</td>
                <td>$100</td>
              </tr>
              <tr>
                <td>February</td>
                <td>$80</td>
              </tr>
              <tr>
                <td>January</td>
                <td>$100</td>
              </tr>
              <tr>
                <td>February</td>
                <td>$80</td>
              </tr>
              <tr>
                <td>January</td>
                <td>$100</td>
              </tr>
              <tr>
                <td>February</td>
                <td>$80</td>
              </tr>
              <tr>
                <td>January</td>
                <td>$100</td>
              </tr>
              <tr>
                <td>February</td>
                <td>$80</td>
              </tr>
              <tr>
                <td>January</td>
                <td>$100</td>
              </tr>
              <tr>
                <td>February</td>
                <td>$80</td>
              </tr>
              <tr>
                <td>January</td>
                <td>$100</td>
              </tr>
              <tr>
                <td>February</td>
                <td>$80</td>
              </tr>
              <tr>
                <td>January</td>
                <td>$100</td>
              </tr>
              <tr>
                <td>February</td>
                <td>$80</td>
              </tr>
              <tr>
                <td>January</td>
                <td>$100</td>
              </tr>
              <tr>
                <td>February</td>
                <td>$80</td>
              </tr>

            </tbody>
          </table>
        </div>
      </details>
    </div>
  </div>
</details>

</div>

 CSS:

.inv{
  display: flex;
  flex-direction: column;
    width: 100%;
    min-height: 100%;
}

.table_pandas details{
   background-color: red;
   height: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
     position: relative;
}

.table_pandas details div.hidden-rows{
    background-color: blue;
    color: white;
    flex: 1;
    top: 3%;
    bottom: 0;
    height: 100%;
    width: 100%;
}

.table_pandas details div.hidden-rows .dataframe{
   width: 50%;
   
}

.table_pandas details div.hidden-rows .dataframe tbody tr{
  height: 50px;
}

 

Basicamente fui especificando a hierarquia dos elementos que é o correto no CCS.

No caso neste exemplo o que manipula a tabela de dentro do details é:

 

.table_pandas details div.hidden-rows .dataframe{
   width: 50%;
   
}

.table_pandas details div.hidden-rows .dataframe tbody tr{
  height: 50px;
}

 

Onde é especificado que na tabela com a classe table_pandas, que contém o elemento details que contém o elemento div com a classe hidden-rows, que contém o elemento table com a classe dataframe   tenha um width de 50%

 

 A tabela com a classe table_pandas, que contém o elemento details que contém o elemento div com a classe hidden-rows, que contém o elemento table com a classe dataframe, que contém o elemento tbody, que contém o elemento tr tenha um height de 50px

 

Enfim... é só ir manipulando do jeito que você quer a parte da tabela para esticar... e sempre verificar se ocupa o tamanho da folha toda, quando expandido.

 

Exemplo acima online: https://jsfiddle.net/dife/8s3tvgr9/

 

PS: deve ter uma forma de criar uma nova view também, mas desconheço o sistema que usas.. 

[Swalls]

11 horas atrás, Duncan disse:

deve ter.
porque não cria uma view só para impressão?

São arquivos de relatório (em html) gerados por um software, não é um pagina web ou uma view de framework. Provavelmente ele usa node ou jinja

 

@DiF Mesmo aplicando hierarquicamente as tabelas do centro não sincronizaram (em tamanho) com as de cima e de baixo, vou continuar na tentativa.