Postavitev tabele - CSS-triki

Na table-layoutopredeljuje lastnine, kaj algoritem brskalnik mora uporabiti za postavitev tabel vrstice, celice, in stolpcev.

table ( table-layout: fixed; )

Kot je razloženo v specifikaciji CSS2.1, je postavitev tabele na splošno stvar okusa in bo odvisna od izbire zasnove. Brskalniki pa bodo samodejno uporabili določene omejitve, ki bodo določale način postavitve tabel. To se zgodi, ko je table-layoutlastnost nastavljena na auto(privzeto). Toda te omejitve je mogoče odpraviti, ko table-layoutje nastavljeno na fixed.

Vrednote

auto: privzeto. Samodejni algoritem brskalnika se uporablja za določanje postavitve vrstic, celic in stolpcev tabele. Nastala tabela tabele je na splošno odvisna od vsebine tabele.
fixed: Pri tej vrednosti postavitev tabele ignorira vsebino in namesto nje uporablja širino tabele, poljubno določeno širino stolpcev ter vrednosti obrobe in razmika med celicami. Vrednosti stolpcev temeljijo na širinah, določenih v stolpcih ali celicah za prvo vrstico tabele.
inherit: označuje, da je vrednost podedovana od table-layoutvrednosti nadrejenega elementa

Da bi imela vrednost fixedučinek, je treba širino tabele nastaviti na kaj drugega kot auto(privzeto za widthlastnost). V spodnjih predstavitvah so vse širine tabel nastavljene na 100%, kar predpostavlja, da želimo, da tabela vodoravno napolni nadrejeni vsebnik.

Najboljši način za prikaz učinkov algoritma fiksne postavitve tabele je uporaba predstavitve.

Oglejte si predstavitev Pen Pen za lastnost postavitve tabele CSS avtorja Louisa Lazarisa (@impressivewebs) na CodePen.

Ko si prvič ogledate zgornjo predstavitev, boste opazili, da je postavitev stolpcev tabele neuravnotežena in nerodna. Takrat tabela s privzetim algoritmom brskalnika določi, kako razporediti tabelo, kar pomeni, da bo vsebina narekovala postavitev. Predstavitev to dejstvo pretirava z vključitvijo dolgega niza besedila v eno celico tabele, medtem ko vse druge celice tabele uporabljajo samo dve besedi. Kot lahko vidite, brskalnik razširi prvi stolpec, da sprejme večji del vsebine.

Če kliknete gumb »Preklopi postavitev tabele: fiksno«, boste videli, kako izgleda postavitev tabele, ko je uporabljen algoritem »fiksno«. Ko table-layout: fixedje uporabljena, vsebina ne narekuje več postavitve, ampak namesto tega brskalnik za določanje širine stolpca uporabi katero koli določeno širino iz prve vrstice tabele. Če v prvi vrstici ni nobene širine, so širine stolpcev enakomerno razdeljene po tabeli, ne glede na vsebino v celicah.

Nadaljnji primeri bodo morda pomagali, da bo to bolj jasno. V naslednji predstavitvi ima tabela element, katerega prvi element ima širino 400px. V tem primeru upoštevajte, da preklapljanje table-layout: fixednima učinka.

Oglejte si predstavitev Pen Pen za lastnost postavitve tabele CSS avtorja Louisa Lazarisa (@impressivewebs) na CodePen.

To se zgodi, ker privzeti algoritem postavitve v bistvu pravi "naredite prvi stolpec 400 px širok, preostale stolpce pa porazdelite glede na njihovo vsebino". Ker imajo drugi trije stolpci enako vsebino, sprememb ne bo. Zdaj pa v enega od ostalih stolpcev dodajte nekaj dodatne besedilne vsebine:

Oglejte si predstavitev Pen za lastnost postavitve tabele CSS s širino col in spremenljivo vsebino Louisa Lazarisa (@impressivewebs) na CodePen.

Če zdaj kliknete preklopni gumb, boste videli, da se stolpci prilagodijo fiksni postavitvi, ne glede na vsebino. Še enkrat se dogaja isto; prvi stolpec je nastavljen na 400 slikovnih pik, preostali stolpci pa so enakomerno razdeljeni. A tokrat je, ker ima eden od stolpcev dodatno vsebino, razlika opazna.

Kako algoritem fiksne postavitve določa širine stolpcev

Naslednji dve predstavitvi bi morali pomagati razumeti, da je prva vrstica tabele tista, ki pomaga določiti širine stolpcev tabele, nastavljene na table-layout: fixed.

Oglejte si predstavitev pisala za postavitev tabele CSS s celico v vrstici 1, ki jo je določil širino Louis Lazaris (@impressivewebs) na CodePen.

V zgornji predstavitvi ima prva celica v prvi vrstici tabele širino 350 slikovnih pik. Preklop table-layout: fixedprilagodi ostale stolpce, prvi pa ostane enak. Zdaj poskusite z naslednjo predstavitvijo:

Oglejte si predstavitev Pen za postavitev tabele CSS s celico v vrstici 2, ki jo je določil širino Louis Lazaris (@impressivewebs) na CodePen.

V tem primeru gre za drugo vrstico, ki ima širino pritrjena na svojo prvo celico tabele. Zdaj, ko kliknete preklopni gumb, se prilagodijo vse širine stolpcev. Še enkrat, to je zato, ker algoritem fiksne postavitve uporablja prvo vrstico za določanje širin stolpcev, končni rezultat pa je, da širine enakomerno porazdeli.

Prednosti algoritma s fiksno postavitvijo

Estetske prednosti uporabe table-layout: fixedbi morale biti razvidne iz zgornjih predstavitev. Druga pomembna prednost pa je uspešnost. Specifikacija se fiksni algoritem nanaša na "hiter" algoritem in to z dobrim razlogom. Brskalniku ni treba analizirati celotne vsebine tabele, preden določi velikost stolpcev; analizirati mora samo prvo vrstico. Rezultat je torej hitrejša obdelava postavitve tabele.