Izgled stola - CSS-trikovi | CSS Almanah 2025

U table-layoutvlasništva definira što algoritam preglednik trebali koristiti da stavi tablicu redaka, stanice i stupaca.

table ( table-layout: fixed; )

Kao što je objašnjeno u specifikaciji CSS2.1, izgled tablice općenito je stvar ukusa i ovisit će o odabiru dizajna. Preglednici će, međutim, automatski primijeniti određena ograničenja koja će definirati način postavljanja tablica. To se događa kada je table-layoutsvojstvo postavljeno na auto(zadano). No ta se ograničenja mogu ukloniti kada table-layoutse postavi na fixed.

Vrijednosti

auto: zadani. Automatski algoritam preglednika koristi se za definiranje rasporeda redaka, ćelija i stupaca tablice. Dobiveni raspored tablice općenito ovisi o sadržaju tablice.
fixed: Uz ovu vrijednost raspored tablice ignorira sadržaj i umjesto toga koristi širinu tablice, bilo koju navedenu širinu stupaca te vrijednosti obruba i razmaka između ćelija. Korištene vrijednosti stupaca temelje se na širinama definiranim na stupcima ili ćelijama za prvi redak tablice.
inherit: označava da je vrijednost naslijeđena od table-layoutvrijednosti svog roditelja

Da bi vrijednost fixedimalo učinka, širina tablice mora se postaviti na nešto drugo osim auto(zadana vrijednost za widthsvojstvo). U demonstracijama u nastavku, sve širine tablice postavljene su na 100%, što pretpostavlja da želimo da tablica ispunjava svoj roditeljski spremnik vodoravno.

Najbolji način da se vide učinci algoritma fiksnog rasporeda tablice je upotreba demonstracije.

Pogledajte Demonstraciju olovke za CSS svojstvo izgleda tablice Louisa Lazarisa (@impressivewebs) na CodePenu.

Kad prvi put pogledate gornju demonstraciju, primijetit ćete da je raspored stupaca tablice neuravnotežen i neugodan. U tom trenutku tablica pomoću zadanog algoritma preglednika definira način postavljanja tablice, što znači da će sadržaj diktirati izgled. Demonstracija pretjeruje s tom činjenicom uključivanjem dugačkog niza teksta unutar jedne ćelije tablice, dok sve ostale stanice tablice koriste samo dvije riječi. Kao što vidite, preglednik proširuje prvi stupac kako bi prihvatio veći dio sadržaja.

Ako kliknete gumb "Prebaci izgled tablice: fiksno", vidjet ćete kako izgleda izgled tablice kada se koristi "fiksni" algoritam. Kada table-layout: fixedse primijeni, sadržaj više ne diktira izgled, već pretraživač koristi bilo koju definiranu širinu iz prvog retka tablice za definiranje širine stupaca. Ako u prvom retku nema širine, širine stupaca podijeljene su jednako po tablici, bez obzira na sadržaj unutar ćelija.

Daljnji primjeri mogu vam pomoći da ovo bude jasnije. U sljedećem pokaznom prikazu tablica ima element čiji prvi element ima širinu od 400px. Primjetite, u ovom slučaju prebacivanje table-layout: fixednema učinka.

Pogledajte Demonstraciju olovke za CSS svojstvo izgleda tablice Louisa Lazarisa (@impressivewebs) na CodePenu.

To se događa zato što zadani algoritam izgleda u osnovi kaže "napravite prvi stupac širinom od 400 piksela i distribuirajte preostale stupce na temelju njihovog sadržaja". Budući da ostala tri stupca imaju jednak sadržaj, međusobni sadržaj neće biti promjena. No, dodajmo sada dodatni tekstualni sadržaj u jedan od ostalih stupaca:

Pogledajte svojstvo olovke Pen za CSS svojstvo izgleda tablice s širinom kolova i promjenjivim sadržajem Louisa Lazarisa (@impressivewebs) na CodePenu.

Ako kliknete gumb za prebacivanje, vidjet ćete kako se stupci prilagođavaju fiksnom rasporedu, bez obzira na sadržaj. Još jednom se događa ista stvar; prvi je stupac postavljen na 400 piksela, a zatim su preostali stupci podijeljeni podjednako. Ali ovaj put, jer jedan od stupaca ima dodatni sadržaj, razlika je primjetna.

Kako algoritam fiksnog rasporeda određuje širine stupaca

Sljedeće dvije demonstracije trebale bi pomoći u razumijevanju da je prvi redak tablice ono što pomaže u definiranju širine stupaca tablice postavljene na table-layout: fixed.

Pogledajte Demonstraciju olovke za raspored tablice CSS-a sa ćelijom u retku 1 kojoj zadaje širinu Louis Lazaris (@impressivewebs) na CodePenu.

U gornjoj demonstraciji prva ćelija u prvom redu tablice ima širinu od 350 piksela. Prebacivanjem se table-layout: fixedpodešavaju ostali stupci, ali prvi ostaje isti. Sada isprobajte sljedeću demonstraciju:

Pogledajte Demonstraciju olovke za CSS-izgled tablice sa ćelijom u retku 2 kojoj zadaje širinu Louis Lazaris (@impressivewebs) na CodePen-u.

U ovom slučaju, to je drugi redak koji ima širinu pričvršćenu na svoju prvu ćeliju tablice. Sada kada se klikne gumb za prebacivanje, prilagođavaju se sve širine stupaca. Opet, to je zato što algoritam fiksnog rasporeda koristi prvi redak za određivanje širine stupaca, a krajnji rezultat je da širine distribuira jednako.

Prednosti algoritma fiksnog rasporeda

Estetske koristi upotrebe table-layout: fixedtrebaju biti jasne iz gornjih demonstracija. Ali druga glavna prednost su performanse. Specifikacija se odnosi na fiksni algoritam kao "brzi" algoritam i to s dobrim razlogom. Preglednik ne mora analizirati cjelokupni sadržaj tablice prije određivanja veličine stupaca; treba samo analizirati prvi red. Rezultat je brža obrada izgleda tablice.