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?
<ol>
ou<ul>