Taulukon asettelu - CSS-temppuja

Sisällysluettelo

table-layoutOminaisuus määrittää, mitä algoritmi selaimen pitäisi käyttää antaa ulos taulukkorivejä, soluja, ja sarakkeita.

table ( table-layout: fixed; )

Kuten CSS2.1-spesifikaatiossa on selitetty, taulukon asettelu on yleensä makun kysymys ja se vaihtelee suunnitteluvaihtoehtojen mukaan. Selaimet käyttävät kuitenkin automaattisesti tiettyjä rajoituksia, jotka määrittelevät taulukoiden asettelun. Tämä tapahtuu, kun table-layoutominaisuus on asetettu auto(oletus). Mutta nämä rajoitteet voidaan poistaa, kun se table-layouton asetettu fixed.

Arvot

  • auto: oletusarvo. Selaimen automaattista algoritmia käytetään määrittämään, kuinka taulukon rivit, solut ja sarakkeet on järjestetty. Tuloksena oleva taulukon asettelu riippuu yleensä taulukon sisällöstä.
  • fixed: Tällä arvolla taulukon asettelu ohittaa sisällön ja käyttää sen sijaan taulukon leveyttä, määritettyä sarakkeiden leveyttä sekä reuna- ja soluväliarvoja. Käytetyt sarakearvot perustuvat taulukon ensimmäisen rivin sarakkeissa tai soluissa määritettyihin leveyksiin.
  • inherit: osoittaa, että arvo on peritty table-layoutvanhemman arvosta

Jotta arvon arvolla fixedolisi vaikutusta, taulukon leveys on asetettava muuhun kuin auto( widthominaisuuden oletusarvo ). Alla olevissa esittelyissä kaikki taulukon leveydet on asetettu 100%: iin, mikä olettaa, että haluamme, että taulukko täyttää emosäiliönsä vaakasuunnassa.

Paras tapa nähdä kiinteän taulukon asettelualgoritmin vaikutukset on demo.

Katso Louis Lazariksen (@impressivewebs) CSS: n Pen Demo for CSS: n taulukko-asettelu-ominaisuus CodePenistä.

Kun tarkastelet ensin yllä olevaa esittelyä, huomaat, että taulukon sarakkeiden asettelu on epätasapainoinen ja hankala. Siinä vaiheessa taulukko käyttää selaimen oletusalgoritmia määrittääkseen taulukon asettamisen, mikä tarkoittaa, että sisältö sanelee asettelun. Demo liioittelee tätä tosiasiaa sisällyttämällä yhden tekstisarjan yhteen taulukon soluun, kun taas kaikki muut taulukon solut käyttävät vain kahta sanaa. Kuten näette, selain laajentaa ensimmäistä saraketta vastaamaan suurempaa sisältöä.

Jos napsautat "Vaihda taulukon asettelu: kiinteä" -painiketta, näet miltä taulukon asettelu näyttää käytettäessä "kiinteää" algoritmia. Kun se table-layout: fixedon käytössä, sisältö ei enää sanele asettelua, vaan sen sijaan selain käyttää sarakkeiden leveyksiä määrittämällä taulukon ensimmäisestä rivistä määritetyt leveydet. Jos ensimmäisellä rivillä ei ole leveyksiä, sarakkeiden leveydet jaetaan tasan taulukkoon solujen sisäisestä sisällöstä riippumatta.

Muut esimerkit voivat auttaa tekemään tästä selvemmän. Seuraavassa esittelyssä taulukossa on elementti, jonka ensimmäisen elementin leveys on 400px. Huomaa tässä tapauksessa, että vaihtaminen table-layout: fixedei vaikuta.

Katso Louis Lazariksen (@impressivewebs) CSS: n Pen Demo for CSS: n taulukko-asettelu-ominaisuus CodePenistä.

Tämä tapahtuu, koska oletusasettelualgoritmi sanoo olennaisesti "tee ensimmäinen sarake 400 kuvapistettä leveäksi ja jaa loput sarakkeet niiden sisällön perusteella". Koska muilla kolmella sarakkeella on sama sisältö kuin toisella, muutosta ei tapahdu. Mutta nyt lisätään ylimääräistä tekstisisältöä toiseen sarakkeeseen:

Katso Louis Lazariksen (@impressivewebs) CSP: n kynäesittely CSS: n taulukkoasettelusta, jonka paksuus ja leveys vaihtelee.

Jos napsautat vaihtopainiketta, näet sarakkeiden mukautuvan kiinteän asettelun mukaiseksi sisällöstä riippumatta. Jälleen kerran sama asia tapahtuu; ensimmäisen sarakkeen arvoksi asetetaan 400 kuvapistettä, loput sarakkeet jaetaan tasan. Mutta tällä kertaa, koska yhdessä sarakkeessa on ylimääräistä sisältöä, ero on havaittavissa.

Kuinka kiinteä asettelualgoritmi määrittää sarakkeiden leveydet

Seuraavien kahden esittelyn pitäisi auttaa ymmärtämään, että taulukon ensimmäinen rivi auttaa määrittämään taulukon sarakeleveydet table-layout: fixed.

Katso CSS: n Pen Demo -sovelluksen taulukon asettelu solulla rivillä 1, jonka Louis Lazaris (@impressivewebs) on määritellyt leveydeltään CodePenillä.

Yllä olevassa esittelyssä taulukon ensimmäisen rivin ensimmäisen solun leveys on 350 kuvapistettä. Vaihtaminen table-layout: fixedsäätää muita sarakkeita, mutta ensimmäinen pysyy samana. Kokeile nyt seuraavaa esittelyä:

Katso Pen Demo -sovelluksen CSS-taulukon asettelu solulla rivillä 2, jonka Louis Lazaris (@impressivewebs) on määritellyt leveydeltään CodePenillä.

Tässä tapauksessa se on toinen rivi, jonka leveys on kiinnitetty ensimmäiseen taulukon soluun. Kun napsautat vaihtopainiketta, kaikki sarakkeiden leveydet säädetään. Jälleen tämä johtuu siitä, että kiinteä asettelualgoritmi käyttää ensimmäistä riviä sarakkeiden leveyksien määrittämiseen, ja lopputulos on, että se jakaa leveydet tasaisesti.

Kiinteän asettelualgoritmin edut

Käyttämisen esteettisten hyötyjen table-layout: fixedtulisi olla selvät yllä olevista esityksistä. Mutta toinen suuri etu on suorituskyky. Tekniset tiedot viittaavat kiinteään algoritmiin "nopeana" algoritmina, ja hyvästä syystä. Selaimen ei tarvitse analysoida koko taulukon sisältöä ennen sarakkeiden koon määrittämistä. se tarvitsee vain analysoida ensimmäisen rivin. Joten tulos on taulukon asettelun nopeampi käsittely.

Lisää tietoa

  • Kiinteät taulukkoasettelut
  • Kiinteä taulukon asettelu CSS2.1-spesifikaatiossa
  • table-layoutOmaisuus CSS taulukossa Moduuli Taso 3

Selaimen tuki

Kromi Safari Firefox Ooppera IE Android iOS
1+ 1+ 1+ 7+ 5+ 2.1+ 3+

Mielenkiintoisia artikkeleita...