1

Estou fazendo uma página HTML que é um relatório de impressão de imagens de uma ordem de serviço. Basicamente, gero uma tabela com duas sub-tabelas que são: 1. cabeçalho com dados; 2. corpo com imagens da ordem de serviço. Preciso que na impressão (uso o Chrome para imprimir como arquivo PDF) a página quebre depois da tabela 2.

Meu código (que tem que ser exatamente desse jeito, infelizmente):

<style type="text/css">img {
  max-width: 250px !important;
  max-height: 250px !important;
}
.txt {
  font-family:arial,helvetica,sans-serif;
}
.txt td {
    padding: 3px 1px 3px 3px;
}
.break {
    page-break-before: always;
}
</style>
<table border="0" data-source="{anexos.listaAnexos}" style="width:100%">
    <tbody>
        <tr>
            <td>
            <table border="0" cellpadding="1" class="break" style="border-collapse:collapse; width:100%">
                <thead>
                    <tr>
                        <td>
                        <table border="0" style="width:100%">
                            <tbody>
                                <tr>
                                    <td colspan="4"><span>TEXTO</span></td>
                                </tr>
                            </tbody>
                        </table>
                        </td>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>
                        <table border="1" cellpadding="1" cellspacing="1" class="txt" style="border-collapse:collapse; width:100%">
                            <tbody>
                                <tr>
                                    <td style="text-align:center; vertical-align:middle"><span>IMAGEM</span></td>
                                </tr>
                            </tbody>
                        </table>
                        </td>
                    </tr>
                </tbody>
            </table>
            </td>
        </tr>
    </tbody>
</table>

O relatório seria gerado -repetidamente- da seguinte forma:

inserir a descrição da imagem aqui

Porém, não consegui fazer ele quebra depois da sub-tabela 2.

Esse HTML eu uso dentro de um sistema (que tem certas limitações, por isso do HTML gambiarra), e que itera de acordo com uma variável que busca os registros de OS para gerar um relatório de imagens de diversas ordens de serviço.

O que sugerem nesse caso?

0

1 Resposta 1

1

Vc não pode quebrar uma table no meio ou quebrar uma table dentro da outra.

"Os autores são alertados de que o aninhamento de floats, divs e caixas com postion absolute entre si, e entre as células da tabela devem ser usado com cuidado, uma vez que a profundidade de aninhamento dessas construções depende da impressora e da implementação."

Fonte: https://www.w3.org/TR/css-print/#s.8.1

Se vc colocar a propriedade page-break-before: always; a cara table que vc incluir no loop vc consegue que cada uma fique em uma página diferente.

Resumidamente basta vc colocar sua classe .break na table data-source="anexos.listaAnexos}"

inserir a descrição da imagem aqui


OBS: Informações adicionais sobre quebrar uma table-row

inserir a descrição da imagem aqui

https://drafts.csswg.org/css-page-3/#page-break-after

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 .