Falsificarea lățimii minime pe o coloană de tabel

cel bun <table> tag-ul este cel mai semantic HTML pentru afișarea datelor tabulare. Dar mi se pare foarte greu să controlez modul în care este prezentat tabelul, în special lățimea coloanelor într-un mediu dinamic în care s-ar putea să nu știi cât de mult conținut este introdus în fiecare celulă de tabel. În unele cazuri, o coloană este foarte largă, în timp ce altele sunt strânse. Alteori, obținem lățimi egale, dar în detrimentul unei coloane care conține mai mult conținut și are nevoie de mai mult spațiu.

Dar am găsit o soluție CSS care ajută la ușurarea lucrurilor. Asta vreau să vă arăt în această postare.

Problema

Mai întâi trebuie să înțelegem cum este gestionat aspectul de către browser. Avem table-layout proprietate în CSS pentru a defini modul în care un tabel ar trebui să distribuie lățimea pentru fiecare coloană a tabelului. Este nevoie de una dintre cele două valori:

• auto (Implicit)
• fixed

Să începem cu un tabel fără a defini nicio lățime pe coloanele sale. Cu alte cuvinte, vom lăsa browserul să decidă câtă lățime să acorde fiecărei coloane prin aplicare table-layout: auto pe el în CSS. După cum veți observa, browserul face tot posibilul cu algoritmul pe care îl are pentru a împărți întreaga lățime disponibilă între fiecare coloană.

Dacă schimbăm un aspect de tabel automat cu table-layout: fixed, atunci browserul va împărți doar spațiul disponibil complet la numărul total de coloane, apoi va aplica acea valoare ca lățime pentru fiecare coloană:

Dar dacă vrem să controlăm lățimea coloanelor noastre? Avem <colgroup> element de ajutor! Este format din individual <col> elemente pe care le putem folosi pentru a specifica lățimea exactă de care avem nevoie pentru fiecare coloană. Să vedem cum funcționează table-layout: auto:

Am aliniat stilurile de dragul ilustrației.

Browserul nu respectă lățimile inline, deoarece acestea depășesc cantitatea de spațiu disponibil pentru tabel atunci când sunt adunate. Ca rezultat, tabelul fură spațiu din coloane, astfel încât toate coloanele să fie vizibile. Acesta este un comportament implicit perfect.

Cum <colgroup> lucreaza cu table-layout: fixed. Să aflăm:

Asta nu arată deloc bine. Avem nevoie de coloana cu o grămadă de conținut în ea să se flexeze puțin, menținând în același timp o lățime fixă ​​pentru restul coloanelor. Un fix table-layout valoarea respectă lățimea, dar atât de mult încât consumă spațiul coloanei care are nevoie de cel mai mult spațiu... ceea ce este o interdicție pentru noi.

Acest lucru ar putea fi rezolvat cu ușurință dacă am putea seta un min-width pe coloană în loc de a width. În acest fel, coloana ar spune: „Vă pot oferi tuturor o parte din lățimea mea până când ajungem la această valoare minimă.” Apoi tabelul ar depăși pur și simplu containerul și va oferi utilizatorului un derulare orizontal pentru a afișa restul tabelului. Dar din pacate, min-width pe masă coloanele nu sunt respectate de către <col> element.

Soluția

Soluția este să falsificăm a min-width și trebuie să fim puțin creativi pentru a o face.

Putem adăuga un gol <col> ca a doua coloană pentru nostru <colgroup> în HTML și aplicați a colspan atribut pe prima coloană, astfel încât prima coloană să ocupe spațiul pentru ambele coloane:

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

Rețineți că am adăugat clase în locul stilurilor inline din exemplul anterior. Aceeași idee se aplică în continuare: aplicăm lățimi pentru fiecare coloană.

Trucul este acea relație dintre primii <col> și secunda goală <col>. Dacă aplicăm o lățime primului <col> (este 200px în fragmentul de mai sus), apoi a doua coloană va fi consumată atunci când aspectul fix al mesei împarte spațiul disponibil pentru a fi distribuit coloanelor. Dar lățimea primei coloane (200px) este respectată și rămâne pe loc.

Voilà! Avem un fals min-width așezat pe o celulă de masă. Prima celulă se flexează pe măsură ce spațiul disponibil se schimbă, iar tabelul se revarsă pentru derulare orizontală, așa cum am sperat.

(am adaugat putin poziționare lipicioasă la prima coloană de acolo.)

Accesibilitate

Să nu uităm complet de accesibilitate aici. Am rulat tabelul prin NVDA pe Windows și VoiceOver pe macOS și am constatat că toate cele cinci coloane sunt anunțate, chiar dacă folosim doar patru dintre ele. Și când prima coloană este focalizată, se anunță „Coloana unu la doi”. Nu este perfect elegant, dar nici nu va face pe cineva să se piardă. Îmi imaginez că am putea arunca o aria-hidden pe coloana nefolosită, dar știți, de asemenea, că ARIA nu este un substitut pentru HTML slab.

---

Recunosc, mi se pare puțin, um, hacky. Dar funcționează! Anunțați-mă dacă aveți o abordare diferită în comentarii... sau știți despre orice confuzie pe care acest „hack” le-ar putea aduce utilizatorilor noștri.

• Distribuție de conținut bazat pe SEO și PR. Amplifică-te astăzi.
• Platoblockchain. Web3 Metaverse Intelligence. Cunoștințe amplificate. Accesați Aici.
• Sursa: https://css-tricks.com/faking-min-width-on-a-table-column/