Falsificando a largura mínima em uma coluna da tabela

O bom e velho <table> tag é o HTML mais semântico para mostrar dados tabulares. Mas acho muito difícil controlar como a tabela é apresentada, principalmente as larguras das colunas em um ambiente dinâmico onde você pode não saber quanto conteúdo está entrando em cada célula da tabela. Em alguns casos, uma coluna é superlarga enquanto outras são amassadas. Outras vezes, obtemos larguras iguais, mas à custa de uma coluna que contém mais conteúdo e precisa de mais espaço.

Mas encontrei uma solução alternativa de truques de CSS que ajuda a tornar as coisas um pouco mais fáceis. É isso que quero te mostrar neste post.

O problema

Primeiro precisamos entender como o layout é tratado pelo navegador. nós temos o table-layout propriedade em CSS para definir como uma tabela deve distribuir a largura para cada coluna da tabela. Ele assume um dos dois valores:

• auto (Padrão)
• fixed

Vamos começar com uma tabela sem definir larguras em suas colunas. Em outras palavras, deixaremos que o navegador decida quanta largura dar a cada coluna aplicando table-layout: auto nele em CSS. Como você notará, o navegador faz o possível com o algoritmo que possui para dividir a largura total disponível entre cada coluna.

Se trocarmos um layout de tabela automática por table-layout: fixed, o navegador simplesmente dividirá todo o espaço disponível pelo número total de colunas e aplicará esse valor como a largura de cada coluna:

Mas e se quisermos controlar as larguras de nossas colunas? nós temos o <colgroup> elemento para ajudar! É composto por indivíduos <col> elementos que podemos usar para especificar a largura exata que precisamos para cada coluna. Vamos ver como isso funciona com table-layout: auto:

Eu inlinei os estilos para fins de ilustração.

O navegador não está respeitando as larguras inline, pois elas excedem a quantidade de espaço de tabela disponível quando somadas. Como resultado, a tabela rouba espaço das colunas para que todas as colunas fiquem visíveis. Este é um comportamento padrão perfeitamente correto.

como funciona <colgroup> trabalhar com table-layout: fixed. Vamos descobrir:

Isso não parece nada bom. Precisamos que a coluna com um monte de conteúdo flexione um pouco enquanto mantém uma largura fixa para o resto das colunas. Uma fixa table-layout value respeita a largura — mas tanto que consome o espaço da coluna que precisa de mais espaço… o que é proibido para nós.

Isso poderia ser facilmente resolvido se pudéssemos definir um min-width na coluna em vez de um width. Dessa forma, a coluna diria: “Posso dar a todos vocês um pouco da minha largura até atingirmos esse valor mínimo”. Em seguida, a tabela simplesmente transbordaria seu contêiner e forneceria ao usuário uma rolagem horizontal para exibir o restante da tabela. Mas infelizmente, min-width nas colunas da tabela não são respeitadas pelo <col> elemento.

A solução

A solução é fingir um min-width e precisamos ser um pouco criativos para fazer isso.

Podemos adicionar um vazio <col> como a segunda coluna para o nosso <colgroup> no HTML e aplique um colspan atributo na primeira coluna para que a primeira coluna ocupe o espaço de ambas as colunas:

<table> <colgroup> <col class="col-200" /> <col /> <col class="col-input" /> <col class="col-date" /> <col class="col-edit" /> </colgroup> <thead> <tr> <th colspan="2">Project name</th> <th>Amount</th> <th>Date</th> <th>Edit</th> </tr> </thead> <!-- etc. -->
</table>

Observe que adicionei classes no lugar dos estilos embutidos do exemplo anterior. A mesma ideia ainda se aplica: estamos aplicando larguras a cada coluna.

O truque é que a relação entre o primeiro <col> e o segundo vazio <col>. Se aplicarmos uma largura ao primeiro <col> (Está 200px no trecho acima), a segunda coluna será consumida quando o layout da tabela fixa dividir o espaço disponível para distribuir pelas colunas. Mas a largura da primeira coluna (200px) é respeitada e permanece em vigor.

Voilà! Nós temos um falso min-width definido em uma célula de tabela. A primeira célula se flexiona conforme o espaço disponível muda e a tabela transborda para rolagem horizontal exatamente como esperávamos.

(adicionei um pouco posicionamento fixo para a primeira coluna lá.)

Acessibilidade

Não vamos esquecer totalmente a acessibilidade aqui. Percorri a tabela por meio do NVDA no Windows e do VoiceOver no macOS e descobri que todas as cinco colunas são anunciadas, mesmo que estejamos usando apenas quatro delas. E quando a primeira coluna está em foco, ela anuncia: “Coluna um a dois”. Não é perfeitamente elegante, mas também não vai fazer com que alguém se perca. Imagino que poderíamos lançar um aria-hidden atributo na coluna não utilizada, mas também sei que ARIA não é um substituto para HTML ruim.

---

Eu admito, isso parece um pouco, um, hacky. Mas funciona! Deixe-me saber se você tem uma abordagem diferente nos comentários… ou sabe de alguma confusão que esse “hack” pode trazer para nossos usuários.

• Conteúdo com tecnologia de SEO e distribuição de relações públicas. Seja amplificado hoje.
• Platoblockchain. Inteligência Metaverso Web3. Conhecimento Ampliado. Acesse aqui.
• Fonte: https://css-tricks.com/faking-min-width-on-a-table-column/