1

Preciso criar uma table de itens que vem a partir de um foreach XSLT para HTML, a cada quatro linhas quebrar em uma nova coluna, segue um exemplo:

inserir a descrição da imagem aqui

exemplo de código que não quebra por coluna

<table>
    <xsl:for-each select="documentoEstoque/epi">
        <tr>
            <td><xsl:value-of select="DsProdutoEpi" /></td>
        </tr>
    </xsl:for-each>
</table>
2
  • 2
    Esse não é o papel de uma tabela... tavez fosse melhor utilizar uma <ol> ou <ul> Commented 12/11/2018 às 17:37
  • @LeandroAngelo mas utilizando uma ol/ul eu posso quebrar a cada 4 linhas? Commented 12/11/2018 às 17:40

1 Resposta 1

2

Vou te dar uma opção um pouco diferente pq ela não é usando tabela é usando UL/LI

Repare que com a regra height: calc(1.2em * 4); eu uso como base a altura da própria fonte com unidades em (já considerando o line-height padrão de 20%), e multiplico por * 4, para ter a altura da lista, e com o flex-direction: column; e o flex-wrap: wrap; eu vou quebrando em colunas uma ao lado da outra.

Veja o exemplo para entender melhor. E pode mudar o tamanho da font pq sempre vai quebrar na quarta linha pq a altura é baseada no tamanho da fonte usando em

ul {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    font-size: 32px;
    height: calc(1.2em * 4);
}
<ul>
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
    <li>item 4</li>
    <li>item 5</li>
    <li>item 6</li>
    <li>item 7</li>
    <li>item 8</li>
    <li>item 9</li>
</ul>


Depends on the user agent. Desktop browsers (including Firefox) use a default value of roughly 1.2, depending on the element's font-family.

"Depende do user agent. Navegadores de desktop (incluindo o Firefox) usam um valor padrão de aproximadamente 1.2, dependendo da font-family do elemento."

Fonte: https://developer.mozilla.org/en-US/docs/Web/CSS/line-height#Values

OBS: Para mais detalhes sobre a unidade EM leia aqui: Por que é recomendado utilizar a unidade "em" ao invés de "px" para fontes?

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 .