Falsk min bredde på en tabellkolonne

den gode gamle <table> taggen er den mest semantiske HTML-koden for å vise tabelldata. Men jeg synes det er veldig vanskelig å kontrollere hvordan tabellen presenteres, spesielt kolonnebredder i et dynamisk miljø der du kanskje ikke vet hvor mye innhold som går inn i hver tabellcelle. I noen tilfeller er én kolonne superbred mens andre er skrudd opp. Andre ganger får vi like bredder, men på bekostning av en kolonne som inneholder mer innhold og trenger mer plass.

Men jeg fant en CSS-triksløsning som hjelper til med å gjøre ting litt enklere. Det er det jeg vil vise deg i dette innlegget.

Problemet

Først må vi forstå hvordan oppsettet håndteres av nettleseren. Vi har table-layout egenskap i CSS for å definere hvordan en tabell skal fordele bredden for hver tabellkolonne. Det tar en av to verdier:

• auto (Standard)
• fixed

La oss starte med en tabell uten å definere noen bredder på kolonnene. Med andre ord vil vi la nettleseren bestemme hvor mye bredde som skal gis hver kolonne ved å bruke table-layout: auto på det i CSS. Som du vil legge merke til, gjør nettleseren sitt beste med algoritmen den har for å dele den fulle tilgjengelige bredden mellom hver kolonne.

Hvis vi bytter ut et automatisk bordoppsett med table-layout: fixed, så vil nettleseren bare dele den fulle tilgjengelige plassen med det totale antallet kolonner, og deretter bruke den verdien som bredden for hver kolonne:

Men hva om vi ønsker å kontrollere bredden på kolonnene våre? Vi har <colgroup> element for å hjelpe! Den består av individuelle <col> elementer vi kan bruke til å spesifisere den nøyaktige bredden vi trenger for hver kolonne. La oss se hvordan det fungerer table-layout: auto:

Jeg har satt inn stilene for illustrasjonens skyld.

Nettleseren respekterer ikke de innebygde breddene siden de overskrider mengden tilgjengelig tabellplass når de legges sammen. Som et resultat stjeler tabellen plass fra kolonnene slik at alle kolonnene er synlige. Dette er helt grei standardoppførsel.

Hvordan gjør <colgroup> jobbe med table-layout: fixed. La oss finne det ut:

Dette ser ikke bra ut i det hele tatt. Vi trenger kolonnen med en haug med innhold i for å bøye seg litt samtidig som vi opprettholder en fast bredde for resten av kolonnene. En fast table-layout verdi respekterer bredden - men så mye at den spiser opp plassen i kolonnen som trenger mest plass... noe som er en no-go for oss.

Dette kunne lett løses hvis bare vi kunne sette en min-width på kolonnen i stedet for en width. På den måten ville kolonnen si: "Jeg kan gi dere alle litt av bredden min til vi når denne minimumsverdien." Så ville tabellen ganske enkelt flyte over beholderen og gi brukeren en horisontal rulling for å vise resten av tabellen. Men uheldigvis, min-width på tabellen kolonner ikke respekteres av <col> element.

løsningen

Løsningen er å forfalske en min-width og vi må være litt kreative for å gjøre det.

Vi kan legge til en tom <col> som den andre kolonnen for vår <colgroup> i HTML-en og bruk en colspan attributt på den første kolonnen slik at den første kolonnen tar opp plass for begge kolonnene:

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

Merk at jeg har lagt til klasser i stedet for de innebygde stilene fra forrige eksempel. Den samme ideen gjelder fortsatt: vi bruker bredder på hver kolonne.

Trikset er at forholdet mellom den første <col> og det tomme sekundet <col>. Hvis vi bruker en bredde på den første <col> (det er 200px i utdraget ovenfor), vil den andre kolonnen bli spist opp når den faste tabelloppsettet deler opp den tilgjengelige plassen for å distribuere til kolonnene. Men bredden på den første kolonnen (200px) respekteres og forblir på plass.

Det! Vi har en faux min-width satt på en tabellcelle. Den første cellen bøyer seg etter hvert som den tilgjengelige plassen endres og tabellen flyter over for horisontal rulling akkurat som vi håpet den ville.

(Jeg la til litt klissete posisjonering til den første kolonnen der.)

tilgjengelighet

La oss ikke helt glemme tilgjengeligheten her. Jeg kjørte tabellen gjennom NVDA på Windows og VoiceOver på macOS og fant ut at alle fem kolonnene er annonsert, selv om vi bare bruker fire av dem. Og når den første kolonnen er i fokus, kunngjør den "Kolonne én til to". Ikke perfekt elegant, men kommer heller ikke til å få noen til å gå seg vill. Jeg ser for meg at vi kan kaste en aria-hidden attributtet på den ubrukte kolonnen, men vet også at ARIA ikke er en erstatning for dårlig HTML.

---

Jeg skal innrømme at dette føles litt, um, hacky. Men det fungerer! Gi meg beskjed hvis du har en annen tilnærming i kommentarene ... eller vet om noen forvirringer dette "hakket" kan føre til brukerne våre.

• SEO-drevet innhold og PR-distribusjon. Bli forsterket i dag.
• Platoblokkkjede. Web3 Metaverse Intelligence. Kunnskap forsterket. Tilgang her.
• kilde: https://css-tricks.com/faking-min-width-on-a-table-column/