Column break in table

Question

I need to create an item table that comes from an XSLT foreach to HTML, every four lines break into a new column, follows an example:

example of code that does not break by column

<table>
    <xsl:for-each select="documentoEstoque/epi">
        <tr>
            <td><xsl:value-of select="DsProdutoEpi" /></td>
        </tr>
    </xsl:for-each>
</table>

Answer 1

I’ll give you a slightly different option because it’s not using table is using UL/LI

Notice that with the rule height: calc(1.2em * 4); I use as base the height of the source itself with units em (already considering the line-height standard of 20%), and multiplicity by * 4, to have the height of the list, and with the flex-direction: column; and the flex-wrap: wrap; I’m breaking into columns next to each other.

See the example to better understand. And you can change the size of font pq will always break in the fourth line pq the height is based on the font size using 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.

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

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

OBS: For more details about the unit EM read here: Why it is recommended to use the "em" unit instead of "px" for fonts?