Column break in table

Question

Column break in table

Navigation

#1 by (2 votes)

1

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

Codeexamplethatdoesnotbreakbycolumn

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

html5 css css3 xslt

asked by anonymous 12.11.2018 / 18:20

1 answer

Get typed data in the wysiwyg Bootstrap editor Update of a single information in Laravel

score 2 · Accepted Answer

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

Note that with the height: calc(1.2em * 4); rule I use the height of the source itself with em units (already considering% 20% default), and multiply by line-height , to have the height of the list, and with * 4 and flex-direction: column; I'm breaking columns next to each other.

See the example to understand better. And you can change the size of the flex-wrap: wrap; pq will always break in the fourth line because the height is based on the font size using font

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 the default value of roughly em , depending on the element 1.2 .

Source: link

OBS: For more details on the font-family unit read here: Why is it recommended to use the drive" em "instead of" px "for fonts? a>