Falsk min. bredde på en tabelkolonne

den gode gamle <table> tag er den mest semantiske HTML til at vise tabeldata. Men jeg har meget svært ved at kontrollere, hvordan tabellen præsenteres, især kolonnebredder i et dynamisk miljø, hvor du måske ikke ved, hvor meget indhold der går ind i hver tabelcelle. I nogle tilfælde er en kolonne super bred, mens andre er skruet op. Andre gange får vi lige store bredder, men på bekostning af en kolonne, der indeholder mere indhold og har brug for mere plads.

Men jeg fandt en CSS-trick-løsning, der hjælper med at gøre tingene lidt nemmere. Det er det, jeg vil vise dig i dette indlæg.

Problemet

Først skal vi forstå, hvordan layout håndteres af browseren. Vi har table-layout egenskab i CSS for at definere, hvordan en tabel skal fordele bredden for hver tabelkolonne. Det tager en af ​​to værdier:

• auto (Standard)
• fixed

Lad os starte med en tabel uden at definere nogen bredder på dens kolonner. Med andre ord vil vi lade browseren bestemme, hvor meget bredde den skal give hver kolonne ved at anvende table-layout: auto på det i CSS. Som du vil bemærke, gør browseren sit bedste med den algoritme, den har til at dele den fulde tilgængelige bredde mellem hver kolonne.

Hvis vi udskifter et automatisk bordlayout med table-layout: fixed, så vil browseren blot dividere den fulde tilgængelige plads med det samlede antal kolonner, og derefter anvende denne værdi som bredden for hver kolonne:

Men hvad nu hvis vi vil kontrollere bredden af ​​vores kolonner? Vi har <colgroup> element til at hjælpe! Den består af individuelle <col> elementer, vi kan bruge til at angive den nøjagtige bredde, vi har brug for for hver kolonne. Lad os se, hvordan det fungerer sammen table-layout: auto:

Jeg har indsat stilarterne for illustrationens skyld.

Browseren respekterer ikke inline-bredderne, da de overstiger mængden af ​​tilgængelig tabelplads, når de lægges sammen. Som et resultat stjæler tabellen plads fra kolonnerne, så alle kolonnerne er synlige. Dette er en helt fin standardadfærd.

Hvordan <colgroup> arbejde med table-layout: fixed. Lad os finde ud af det:

Det her ser slet ikke godt ud. Vi skal bruge kolonnen med en masse indhold til at bøje lidt, mens vi bevarer en fast bredde for resten af ​​kolonnerne. En fast table-layout værdi respekterer bredden - men så meget, at den æder pladsen i søjlen, der har brug for mest plads... hvilket er et no-go for os.

Dette kunne nemt løses, hvis bare vi kunne sætte en min-width på søjlen i stedet for en width. På den måde ville kolonnen sige: "Jeg kan give jer alle noget af min bredde, indtil vi når denne minimumsværdi." Så ville tabellen simpelthen flyde over sin beholder og give brugeren en vandret rulle for at vise resten af ​​tabellen. Men desværre, min-width på tabel kolonner ikke respekteres af <col> element.

løsningen

Løsningen er at fake en min-width og vi skal være lidt kreative for at gøre det.

Vi kan tilføje en tom <col> som anden kolonne for vores <colgroup> i HTML og anvend en colspan attribut på den første kolonne, så den første kolonne optager pladsen for begge kolonner:

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

Bemærk, at jeg har tilføjet klasser i stedet for de inline-stile fra det forrige eksempel. Den samme idé gælder stadig: vi anvender bredder på hver kolonne.

Tricket er, at forholdet mellem den første <col> og det tomme sekund <col>. Hvis vi anvender en bredde til den første <col> (det er 200px i uddraget ovenfor), så vil den anden kolonne blive spist op, når det faste tabellayout opdeler den tilgængelige plads til at fordele til kolonnerne. Men bredden af ​​den første kolonne (200px) respekteres og forbliver på plads.

Sådan! Vi har en faux min-width indstillet på en tabelcelle. Den første celle bøjes, efterhånden som den tilgængelige plads ændres, og bordet flyder over til vandret rulning, ligesom vi håbede, det ville.

(Jeg tilføjede lidt klæbrig positionering til den første kolonne der.)

Tilgængelighed

Lad os ikke helt glemme tilgængeligheden her. Jeg kørte tabellen gennem NVDA på Windows og VoiceOver på macOS og fandt ud af, at alle fem kolonner er annonceret, selvom vi kun bruger fire af dem. Og når den første kolonne er i fokus, annoncerer den, "Kolonne et til to". Ikke perfekt elegant, men vil heller ikke få nogen til at fare vild. Jeg forestiller mig, at vi kunne kaste en aria-hidden attribut på den ubrugte kolonne, men ved også, at ARIA ikke er en erstatning for dårlig HTML.

---

Jeg indrømmer, at det her føles lidt, øhm, hacky. Men det virker! Fortæl mig, hvis du har en anden tilgang i kommentarerne ... eller kender til nogen forvirring, som dette "hack" kan bringe til vores brugere.

• SEO Powered Content & PR Distribution. Bliv forstærket i dag.
• Platoblokkæde. Web3 Metaverse Intelligence. Viden forstærket. Adgang her.
• Kilde: https://css-tricks.com/faking-min-width-on-a-table-column/