Minimileveyden väärentäminen pöydän sarakkeessa

hyvä vanha <table> tag on semanttisin HTML-koodi taulukkotietojen näyttämiseen. Minusta on kuitenkin erittäin vaikea hallita taulukon esittämistä, erityisesti sarakkeiden leveyksiä dynaamisessa ympäristössä, jossa et ehkä tiedä, kuinka paljon sisältöä menee kuhunkin taulukon soluun. Joissakin tapauksissa yksi sarake on erittäin leveä, kun taas toiset ovat rypistyneet. Muina aikoina saamme samat leveydet, mutta enemmän sisältöä sisältävän ja enemmän tilaa tarvitsevan sarakkeen kustannuksella.

Mutta löysin CSS-temppuja sisältävän kiertotavan, joka helpottaa asioita hieman. Sen haluan näyttää sinulle tässä postauksessa.

Ongelma

Ensin meidän on ymmärrettävä, kuinka selain käsittelee asettelua. Meillä on table-layout Ominaisuus CSS:ssä määrittääksesi, kuinka taulukon tulee jakaa kunkin taulukon sarakkeen leveys. Se vaatii jommankumman kahdesta arvosta:

• auto (Oletus)
• fixed

Aloitetaan taulukosta määrittelemättä sen sarakkeiden leveyksiä. Toisin sanoen annamme selaimen päättää, kuinka paljon leveyttä se antaa kullekin sarakkeelle soveltamalla table-layout: auto siihen CSS:ssä. Kuten huomaat, selain tekee parhaansa algoritmilla, jonka sen on jaettava täysi leveys kunkin sarakkeen kesken.

Jos vaihdamme automaattisen taulukon asettelun kanssa table-layout: fixed, selain vain jakaa täyden käytettävissä olevan tilan sarakkeiden kokonaismäärällä ja käyttää sitten tätä arvoa kunkin sarakkeen leveydeksi:

Mutta entä jos haluamme hallita sarakkeiden leveyksiä? Meillä on <colgroup> elementti auttaa! Se koostuu yksilöistä <col> elementtejä, joiden avulla voimme määrittää tarkan leveyden, jota tarvitsemme kullekin sarakkeelle. Katsotaan kuinka se toimii table-layout: auto:

Olen siivonnut tyylit havainnollistamisen vuoksi.

Selain ei noudata rivin leveyksiä, koska ne ylittävät käytettävissä olevan taulukkotilan määrän laskettuna. Tämän seurauksena taulukko vie tilaa sarakkeilta, jotta kaikki sarakkeet ovat näkyvissä. Tämä on täysin hieno oletuskäyttäytyminen.

Miten <colgroup> työskennellä table-layout: fixed. Otetaan selvää:

Tämä ei näytä ollenkaan hyvältä. Tarvitsemme sarakkeen, jossa on paljon sisältöä, joustavan hieman ja säilyttäen samalla kiinteän leveyden muilla sarakkeilla. Kiinteä table-layout arvo kunnioittaa leveyttä – mutta niin paljon, että se vie eniten tilaa tarvitsevan sarakkeen tilan… mikä on meille mahdotonta.

Tämä voitaisiin helposti ratkaista, jos vain voisimme asettaa a min-width sarakkeessa a:n sijaan width. Tällä tavalla sarake sanoisi: "Voin antaa teille kaikille osan leveydestäni, kunnes saavutamme tämän vähimmäisarvon." Sitten taulukko yksinkertaisesti vuotaisi säilönsä yli ja antaisi käyttäjälle vaakasuuntaisen vierityksen taulukon loppuosan näyttämiseksi. Mutta valitettavasti, min-width taulukon sarakkeita ei noudateta <col> elementti.

ratkaisu

Ratkaisu on väärentää a min-width ja meidän on oltava hieman luovia tehdäksemme sen.

Voimme lisätä tyhjän <col> toisena sarakkeena meidän <colgroup> HTML-koodissa ja käytä a colspan attribuutti ensimmäisessä sarakkeessa niin, että ensimmäinen sarake vie tilaa molemmille sarakkeille:

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

Huomaa, että olen lisännyt luokkia edellisen esimerkin sisäisten tyylien tilalle. Sama ajatus pätee edelleen: käytämme leveyksiä jokaiseen sarakkeeseen.

Temppu on se suhde ensimmäisten välillä <col> ja tyhjä toinen <col>. Jos käytämme leveyttä ensimmäiseen <col> (sen 200px yllä olevassa katkelmassa), toinen sarake kuluu, kun kiinteä taulukkoasettelu jakaa käytettävissä olevan tilan sarakkeisiin jaettavaksi. Mutta ensimmäisen sarakkeen leveys (200px) kunnioitetaan ja pysyy paikallaan.

Voilà! Meillä on väärennös min-width asetettu pöydän soluun. Ensimmäinen solu joustaa käytettävissä olevan tilan muuttuessa ja taulukko ylivuoto vaakasuuntaista vieritystä varten juuri niin kuin toivoimme sen tekevän.

(lisäsin vähän tahmea sijainti siellä olevaan ensimmäiseen sarakkeeseen.)

Käytettävyys:

Emme saa unohtaa saavutettavuutta täällä. Ajoin taulukon NVDA:n läpi Windowsissa ja VoiceOverissa macOS:ssä ja huomasin, että kaikki viisi saraketta on ilmoitettu, vaikka käytämme vain neljää niistä. Ja kun ensimmäinen sarake on kohdistettu, se ilmoittaa: "Sarake yksi - kaksi". Ei täydellisen tyylikäs, mutta ei myöskään saa ketään eksymään. Luulen, että voisimme heittää aria-hidden attribuuttia käyttämättömässä sarakkeessa, mutta tiedä myös, että ARIA ei korvaa huonoa HTML:ää.

---

Myönnän, tämä tuntuu vähän, hmm, hackalta. Mutta se toimii! Kerro minulle, jos sinulla on erilainen lähestymistapa kommenteissa… tai tiedät sekaannuksista, joita tämä "hakkerointi" saattaa aiheuttaa käyttäjillemme.

• SEO-pohjainen sisällön ja PR-jakelu. Vahvista jo tänään.
• Platoblockchain. Web3 Metaverse Intelligence. Tietoa laajennettu. Pääsy tästä.
• Lähde: https://css-tricks.com/faking-min-width-on-a-table-column/