Falsificare la larghezza minima su una colonna della tabella

Il buon vecchio <table> tag è l'HTML più semantico per mostrare dati tabulari. Ma trovo molto difficile controllare come viene presentata la tabella, in particolare la larghezza delle colonne in un ambiente dinamico in cui potresti non sapere quanto contenuto sta andando in ogni cella della tabella. In alcuni casi, una colonna è super larga mentre altre sono accartocciate. Altre volte, otteniamo larghezze uguali, ma a scapito di una colonna che contiene più contenuto e necessita di più spazio.

Ma ho trovato una soluzione alternativa CSS tricks-y che aiuta a rendere le cose un po' più semplici. Questo è quello che voglio mostrarti in questo post.

Il problema

Per prima cosa dobbiamo capire come viene gestito il layout dal browser. Abbiamo il table-layout proprietà in CSS per definire come una tabella dovrebbe distribuire la larghezza per ogni colonna della tabella. Assume uno dei due valori:

• auto (Default)
• fixed

Cominciamo con una tabella senza definire alcuna larghezza sulle sue colonne. In altre parole, lasceremo che sia il browser a decidere quanta larghezza dare ad ogni colonna applicando table-layout: auto su di esso in CSS. Come noterai, il browser fa del suo meglio con l'algoritmo che deve dividere l'intera larghezza disponibile tra ogni colonna.

Se sostituiamo un layout di tabella automatica con table-layout: fixed, il browser dividerà semplicemente l'intero spazio disponibile per il numero totale di colonne, quindi applicherà quel valore come larghezza per ogni colonna:

Ma cosa succede se vogliamo controllare le larghezze delle nostre colonne? Abbiamo il <colgroup> elemento per aiutare! Consiste di individuo <col> elementi che possiamo usare per specificare la larghezza esatta di cui abbiamo bisogno per ogni colonna. Vediamo come funziona con table-layout: auto:

Ho incorporato gli stili per motivi di illustrazione.

Il browser non rispetta le larghezze inline poiché superano la quantità di tablespace disponibile una volta sommate. Di conseguenza, la tabella sottrae spazio alle colonne in modo che tutte le colonne siano visibili. Questo è un comportamento predefinito perfettamente corretto.

Che aspetto ha e come funziona il <colgroup> lavorare con table-layout: fixed. Scopriamolo:

Questo non sembra affatto buono. Abbiamo bisogno che la colonna con un mucchio di contenuti si fletta un po' mantenendo una larghezza fissa per il resto delle colonne. Un fisso table-layout value rispetta la larghezza, ma così tanto da divorare lo spazio della colonna che ha bisogno di più spazio... il che è un problema per noi.

Questo potrebbe essere facilmente risolto se solo potessimo impostare a min-width sulla colonna invece di a width. In questo modo, la colonna direbbe: "Posso dare a tutti voi un po' della mia larghezza finché non raggiungiamo questo valore minimo". Quindi la tabella traboccherebbe semplicemente dal suo contenitore e offrirebbe all'utente uno scorrimento orizzontale per visualizzare il resto della tabella. Ma sfortunatamente, min-width sulle colonne della tabella non sono rispettate dal <col> elemento.

La soluzione

La soluzione è fingere a min-width e dobbiamo essere un po' creativi per farlo.

Possiamo aggiungere un vuoto <col> come seconda colonna per il nostro <colgroup> nell'HTML e applicare a colspan attributo sulla prima colonna in modo che la prima colonna occupi lo spazio per entrambe le colonne:

<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>

Si noti che ho aggiunto classi al posto degli stili incorporati dell'esempio precedente. La stessa idea si applica ancora: stiamo applicando larghezze a ciascuna colonna.

Il trucco è che il rapporto tra il primo <col> e il secondo vuoto <col>. Se applichiamo una larghezza al primo <col> (suo 200px nello snippet sopra), la seconda colonna verrà consumata quando il layout della tabella fissa divide lo spazio disponibile da distribuire alle colonne. Ma la larghezza della prima colonna (200px) è rispettato e rimane in vigore.

Voilà! Abbiamo un falso min-width impostato su una cella della tabella. La prima cella si flette man mano che lo spazio disponibile cambia e la tabella trabocca per lo scorrimento orizzontale proprio come speravamo.

(ho aggiunto un po' posizionamento appiccicoso alla prima colonna lì.)

Accessibilità

Non dimentichiamoci del tutto dell'accessibilità qui. Ho eseguito la tabella tramite NVDA su Windows e VoiceOver su macOS e ho scoperto che tutte e cinque le colonne sono annunciate, anche se ne stiamo usando solo quattro. E quando la prima colonna è a fuoco, annuncia "Colonna da uno a due". Non perfettamente elegante ma anche non farà perdere qualcuno. Immagino che potremmo lanciare un aria-hidden attributo sulla colonna inutilizzata, ma sappi anche che ARIA non è un sostituto dell'HTML scadente.

---

Lo ammetto, sembra un po', um, confuso. Ma funziona! Fammi sapere se hai un approccio diverso nei commenti... o conosci eventuali confusioni che questo "hack" potrebbe portare ai nostri utenti.

• Distribuzione di contenuti basati su SEO e PR. Ricevi amplificazione oggi.
• Platoblockchain. Web3 Metaverse Intelligence. Conoscenza amplificata. Accedi qui.
• Fonte: https://css-tricks.com/faking-min-width-on-a-table-column/