Minimális szélesség hamisítása egy asztaloszlopon

a jó öreg <table> A címke a legszemantikusabb HTML a táblázatos adatok megjelenítéséhez. De nagyon nehezen tudom szabályozni a táblázat megjelenítését, különösen az oszlopszélességeket dinamikus környezetben, ahol nem biztos, hogy tudhatod, mennyi tartalom kerül az egyes táblázatcellákba. Egyes esetekben az egyik oszlop rendkívül széles, míg a többi oszlop fel van húzva. Máskor egyenlő szélességet kapunk, de a több tartalommal rendelkező és több helyet igénylő oszlop rovására.

De találtam egy CSS-trükkök megoldását, amely megkönnyíti a dolgokat. Ezt szeretném megmutatni ebben a bejegyzésben.

A probléma

Először is meg kell értenünk, hogyan kezeli a böngésző az elrendezést. Megvan a table-layout tulajdonság a CSS-ben annak meghatározásához, hogy egy tábla hogyan osztja el az egyes táblázatoszlopok szélességét. Két érték egyikét veszi igénybe:

• auto (Alapértelmezett)
• fixed

Kezdjük egy táblázattal anélkül, hogy az oszlopaiban szélességet határoznánk meg. Más szóval, hagyjuk, hogy a böngésző eldöntse, mekkora szélességet ad az egyes oszlopoknak az alkalmazással table-layout: auto rajta CSS-ben. Amint látni fogja, a böngésző mindent megtesz azzal az algoritmussal, hogy a teljes elérhető szélességet felosztja az egyes oszlopok között.

Ha felcserélünk egy automatikus táblázatelrendezést azzal table-layout: fixed, akkor a böngésző csak elosztja a teljes rendelkezésre álló helyet az oszlopok teljes számával, majd ezt az értéket alkalmazza minden oszlop szélességeként:

De mi van akkor, ha szabályozni akarjuk oszlopaink szélességét? Megvan a <colgroup> elem, hogy segítsen! Egyediből áll <col> elemekkel tudjuk megadni az egyes oszlopokhoz szükséges pontos szélességet. Lássuk, hogyan működik együtt table-layout: auto:

A stílusokat a szemléltetés kedvéért írtam be.

A böngésző nem veszi figyelembe a soron belüli szélességeket, mivel ezek összeadva meghaladják a rendelkezésre álló táblaterületet. Ennek eredményeként a táblázat helyet foglal el az oszlopoktól, így az összes oszlop látható. Ez teljesen jó alapértelmezett viselkedés.

Hogyan működik <colgroup> dolgozik vele table-layout: fixed. Találjuk ki:

Ez egyáltalán nem néz ki jól. Szükségünk van arra, hogy a sok tartalommal rendelkező oszlop kissé meghajljon, miközben a többi oszlop fix szélességét megtartja. Egy fix table-layout az érték tiszteletben tartja a szélességet – de annyira, hogy felemészti annak az oszlopnak a helyét, amelyiknek a legtöbb helyre van szüksége… ami számunkra nem megy.

Ez könnyen megoldható lenne, ha csak a min-width oszlopon a helyett width. Ily módon az oszlop azt mondaná: „Mindannyian megadhatom a szélességem egy részét, amíg el nem érjük ezt a minimális értéket.” Ekkor a táblázat egyszerűen túlcsordulna a tárolóján, és a felhasználónak egy vízszintes görgetést adna a táblázat többi részének megjelenítéséhez. De sajnos, min-width táblázat oszlopaiban nem tartják tiszteletben a <col> elem.

A megoldás

A megoldás az, hogy meghamisítjuk a min-width és ehhez egy kicsit kreatívnak kell lennünk.

Hozzáadhatunk egy üreset <col> mint a második oszlop a mi <colgroup> a HTML-ben, és alkalmazza a colspan attribútumot az első oszlopban úgy, hogy az első oszlop mindkét oszlop számára elfoglalja a helyet:

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

Vegye figyelembe, hogy osztályokat adtam hozzá az előző példában szereplő belső stílusok helyére. Ugyanez az ötlet továbbra is érvényes: minden oszlopra szélességet alkalmazunk.

A trükk az elsők közötti kapcsolat <col> és az üres második <col>. Ha szélességet alkalmazunk az elsőre <col> (ez van 200px a fenti részletben), akkor a második oszlop elfogy, amikor a rögzített táblázatelrendezés felosztja a rendelkezésre álló helyet az oszlopok között. De az első oszlop szélessége (200px) tiszteletben tartják és a helyén marad.

Voálá! Van egy hamisítványunk min-width asztali cellára állítva. Az első cella meghajlik, ahogy a rendelkezésre álló hely változik, és a táblázat túlcsordul a vízszintes görgetéshez, ahogy azt reméltük.

(kicsit hozzátettem ragadós pozicionálás ott az első oszlopba.)

megközelíthetőség

Itt ne feledkezzünk meg az akadálymentesítésről sem. Végigfuttattam a táblázatot az NVDA-n Windows rendszeren és a VoiceOveren macOS rendszeren, és azt tapasztaltam, hogy mind az öt oszlop be van jelentve, még akkor is, ha csak négyet használunk. És amikor az első oszlop a fókuszban van, bejelenti: „Oszlop egytől kettőig”. Nem tökéletesen elegáns, de nem is fog valakit eltévedni. Azt hiszem, dobhatnánk egy aria-hidden attribútumot a nem használt oszlopban, de azt is tudja, hogy az ARIA nem helyettesíti a rossz HTML-t.

---

Bevallom, ez egy kicsit durva érzés. De működik! Tudassa velem, ha más megközelítést alkalmaz a megjegyzésekben… vagy tud arról, hogy ez a „hack” bármilyen zavart okozhat felhasználóinknak.

• SEO által támogatott tartalom és PR terjesztés. Erősödjön még ma.
• Platoblockchain. Web3 metaverzum intelligencia. Felerősített tudás. Hozzáférés itt.
• Forrás: https://css-tricks.com/faking-min-width-on-a-table-column/