Laženje najmanjše širine na stolpcu tabele

dobri stari <table> je najbolj semantičen HTML za prikaz tabelaričnih podatkov. Vendar se mi zdi zelo težko nadzorovati, kako je tabela predstavljena, zlasti širine stolpcev v dinamičnem okolju, kjer morda ne veste, koliko vsebine gre v posamezno celico tabele. V nekaterih primerih je en stolpec zelo širok, drugi pa zmečkani. Včasih dobimo enake širine, a na račun stolpca, ki vsebuje več vsebine in potrebuje več prostora.

Toda našel sem rešitev s triki CSS, ki pomaga nekoliko olajšati stvari. To vam želim pokazati v tej objavi.

Težava

Najprej moramo razumeti, kako postavitev obravnava brskalnik. Imamo table-layout lastnost v CSS, da določite, kako naj tabela porazdeli širino za vsak stolpec tabele. Zavzame eno od dveh vrednosti:

• auto (Privzeto)
• fixed

Začnimo s tabelo, ne da bi določili širine njenih stolpcev. Z drugimi besedami, brskalniku bomo dovolili, da se odloči, koliko širine bo dal posameznemu stolpcu z uporabo table-layout: auto na njem v CSS. Kot boste opazili, se brskalnik po najboljših močeh trudi z algoritmom, ki ga ima, da razdeli celotno razpoložljivo širino med posamezne stolpce.

Če zamenjamo samodejno postavitev tabele z table-layout: fixed, potem bo brskalnik samo razdelil celoten razpoložljivi prostor s skupnim številom stolpcev, nato pa to vrednost uporabil kot širino za vsak stolpec:

Kaj pa, če želimo nadzorovati širine naših stolpcev? Imamo <colgroup> element za pomoč! Sestavljen je iz posameznih <col> elemente, s katerimi lahko določimo natančno širino, ki jo potrebujemo za vsak stolpec. Poglejmo, kako to deluje z table-layout: auto:

Sloge sem vnesel zaradi ilustracije.

Brskalnik ne upošteva širin v vrstici, saj presegajo količino razpoložljivega prostora tabel, ko se seštejejo. Posledično tabela ukrade prostor stolpcem, tako da so vsi stolpci vidni. To je povsem v redu privzeto vedenje.

Kako deluje <colgroup> delo z table-layout: fixed. Pa ugotovimo:

To sploh ne izgleda dobro. Potrebujemo, da se stolpec s kupom vsebine v njem nekoliko upogne, hkrati pa ohranja fiksno širino za preostale stolpce. Popravljeno table-layout vrednost spoštuje širino — vendar tako zelo, da poje prostor stolpca, ki potrebuje največ prostora ... kar je za nas prepovedano.

To bi zlahka rešili, če bi le lahko nastavili a min-width na stolpcu namesto a width. Na ta način bi v stolpcu pisalo: »Vsem vam lahko dam nekaj svoje širine, dokler ne dosežemo te minimalne vrednosti.« Nato bi tabela preprosto prestopila svoj vsebnik in uporabniku omogočila vodoravno drsenje za prikaz preostalega dela tabele. Ampak na žalost, min-width na stolpce tabele ne upoštevajo <col> element.

rešitev

Rešitev je ponarejanje a min-width in za to moramo biti nekoliko ustvarjalni.

Dodamo lahko prazno <col> kot drugi stolpec za našo <colgroup> v HTML in uporabite a colspan atribut v prvem stolpcu, tako da prvi stolpec zavzame prostor za oba stolpca:

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

Upoštevajte, da sem dodal razrede namesto vgrajenih slogov iz prejšnjega primera. Še vedno velja ista ideja: vsakemu stolpcu dodajamo širine.

Trik je v tem razmerju med prvim <col> in prazno drugo <col>. Če na prvo nanesemo širino <col> (je 200px v zgornjem izrezku), bo drugi stolpec pojedel, ko bo fiksna postavitev tabele razdelila razpoložljivi prostor za razdelitev v stolpce. Toda širina prvega stolpca (200px) se spoštuje in ostaja na mestu.

Voilà! Imamo ponaredek min-width nastavite na celico tabele. Prva celica se upogne, ko se razpoložljivi prostor spremeni in tabela se prelije za vodoravno drsenje, kot smo upali.

(Malo sem dodal lepljivo pozicioniranje v prvi stolpec tam.)

Dostopnost

Tukaj ne smemo povsem pozabiti na dostopnost. Pregledal sem tabelo prek NVDA v sistemu Windows in VoiceOver v sistemu macOS in ugotovil, da je napovedanih vseh pet stolpcev, tudi če uporabljamo samo štiri od njih. In ko je prvi stolpec v središču pozornosti, napove »Stolpec od ena do dva«. Ni povsem eleganten, a tudi ne bo povzročil, da bi se kdo izgubil. Predstavljam si, da bi lahko vrgli aria-hidden v neuporabljenem stolpcu, vendar vedite tudi, da ARIA ni nadomestilo za slab HTML.

---

Priznam, to se zdi malo, hm, hekano. Ampak deluje! Sporočite mi, če imate drugačen pristop v komentarjih ... ali veste o kakršni koli zmedi, ki bi jo ta »kramp« lahko prinesel našim uporabnikom.

• Distribucija vsebine in PR s pomočjo SEO. Okrepite se še danes.
• Platoblockchain. Web3 Metaverse Intelligence. Razširjeno znanje. Dostopite tukaj.
• vir: https://css-tricks.com/faking-min-width-on-a-table-column/