Minimaalse laiuse võltsimine lauaveerul

hea vana <table> silt on kõige semantilisem HTML tabeliandmete kuvamiseks. Kuid minu arvates on väga raske kontrollida tabeli esitamist, eriti veergude laiust dünaamilises keskkonnas, kus te ei pruugi teada, kui palju sisu igasse tabeli lahtrisse läheb. Mõnel juhul on üks veerg ülilai, samas kui teised on üles tõmmatud. Muul ajal saame võrdsed laiused, kuid rohkem sisu sisaldava ja rohkem ruumi vajava veeru arvelt.

Kuid leidsin CSS-i trikkide lahenduse, mis aitab asju pisut lihtsamaks muuta. Seda ma tahan teile selles postituses näidata.

Probleem

Kõigepealt peame mõistma, kuidas brauser paigutust haldab. Meil on table-layout atribuut CSS-is, et määrata, kuidas tabel peaks jaotama iga tabeli veeru laiust. See võtab ühe kahest väärtusest:

• auto (Vaikimisi)
• fixed

Alustame tabeliga, määramata selle veergudele laiusi. Teisisõnu laseme brauseril otsustada, kui palju laiust igale veerule rakendades anda table-layout: auto sellel CSS-is. Nagu näete, annab brauser oma parima algoritmi abil, mis peab jagama kogu saadaoleva laiuse iga veeru vahel.

Kui vahetame automaatse tabelipaigutuse välja table-layout: fixed, siis jagab brauser lihtsalt kogu saadaoleva ruumi veergude koguarvuga ja rakendab seejärel selle väärtuse iga veeru laiuseks:

Aga mis siis, kui tahame oma veergude laiust juhtida? Meil on <colgroup> element abiks! See koosneb üksikutest <col> elemente, mida saame kasutada iga veeru jaoks vajaliku täpse laiuse määramiseks. Vaatame, kuidas see koos toimib table-layout: auto:

Stiilid olen illustreerimise huvides lisanud.

Brauser ei järgi tekstisiseseid laiusi, kuna need ületavad liitmisel saadaoleva tabeliruumi. Selle tulemusena varastab tabel veergudelt ruumi, nii et kõik veerud on nähtavad. See on täiesti hea vaikekäitumine.

Kuidas <colgroup> töötama koos table-layout: fixed. Uurime välja:

See ei näe üldse hea välja. Peame veerg, milles on palju sisu, veidi painduma, säilitades samal ajal ülejäänud veergude jaoks fikseeritud laiuse. Fikseeritud table-layout väärtus austab laiust, kuid nii palju, et see sööb kõige rohkem ruumi vajava veeru ruumi… mis on meie jaoks keelatud.

Seda saaks hõlpsasti lahendada, kui vaid saaksime määrata a min-width veerus a asemel width. Nii oleks veerus kirjas: "Ma saan teile kõigile anda osa oma laiusest, kuni saavutame selle miinimumväärtuse." Siis täitub tabel lihtsalt konteinerist üle ja kasutajale keritakse ülejäänud tabeli kuvamiseks horisontaalselt. Aga kahjuks, min-width tabeli veerge ei järgi <col> element.

lahendus

Lahendus on võltsida a min-width ja me peame olema natuke loomingulised, et seda teha.

Saame lisada tühja <col> teise veeruna meie jaoks <colgroup> HTML-is ja rakendage a colspan atribuut esimeses veerus, nii et esimene veerg võtab ruumi mõlema veeru jaoks:

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

Pange tähele, et olen lisanud klassid eelmise näite tekstisiseste stiilide asemele. Sama idee kehtib endiselt: me rakendame igale veerule laiust.

Trikk on selles, et suhe esimeste vahel <col> ja tühi teine <col>. Kui rakendame laiuse esimesele <col> (see on 200px ülaltoodud lõigus), siis söödetakse teine ​​veerg ära, kui fikseeritud tabelipaigutus jagab veergudele jaotamiseks saadaoleva ruumi. Kuid esimese veeru laius (200px) austatakse ja jääb paigale.

Viola! Meil on faux min-width laualahtrile seatud. Esimene lahter paindub saadaoleva ruumi muutumisel ja tabel täitub horisontaalseks kerimiseks täpselt nii, nagu me lootsime.

(lisasin natuke kleepuv positsioneerimine seal esimesse veergu.)

kättesaadavus

Ärgem unustagem siinkohal täielikult juurdepääsetavust. Käivitasin tabelit NVDA kaudu Windowsis ja VoiceOveris macOS-is ning leidsin, et kõik viis veergu on välja kuulutatud, isegi kui kasutame neist ainult nelja. Ja kui esimene veerg on fookuses, teatab see: "Veerg üks kuni kaks". Mitte täiuslikult elegantne, kuid ei põhjusta ka kedagi eksimist. Ma kujutan ette, et võiksime visata aria-hidden atribuut kasutamata veerus, kuid teadke ka, et ARIA ei asenda kehva HTML-i.

---

Tunnistan, see tundub veidi, um, hack. Aga see töötab! Andke mulle teada, kui kasutate kommentaarides teistsugust lähenemist… või teate mis tahes segadust, mida see "häkkimine" võib meie kasutajatele tuua.

• SEO-põhise sisu ja PR-levi. Võimenduge juba täna.
• Platoblockchain. Web3 metaversiooni intelligentsus. Täiustatud teadmised. Juurdepääs siia.
• Allikas: https://css-tricks.com/faking-min-width-on-a-table-column/