Tabelloppsett - CSS-triks | CSS-almanakk 2025

De table-layouteiendoms definerer hva algoritmen nettleseren skal bruke til å legge ut tabellrader, celler og kolonner.

table ( table-layout: fixed; )

Som forklart i CSS2.1-spesifikasjonen, er tabelloppsett generelt et spørsmål om smak og vil variere avhengig av designvalg. Nettlesere vil imidlertid automatisk bruke visse begrensninger som vil definere hvordan tabeller er lagt opp. Dette skjer når table-layouteiendommen er satt til auto(standard). Men disse begrensningene kan løftes når den table-layouter satt til fixed.

Verdier

auto: Standaren. Nettleserens automatiske algoritme brukes til å definere hvordan en tabells rader, celler og kolonner er lagt ut. Den resulterende tabelloppsettet er generelt avhengig av innholdet i tabellen.
fixed: Med denne verdien ignorerer tabelloppsettet innholdet og bruker i stedet tabellens bredde, hvilken som helst spesifisert bredde på kolonner og verdier for kant- og celleavstand. Kolonneverdiene som brukes er basert på bredder definert i kolonner eller celler for den første raden i tabellen.
inherit: indikerer at verdien er arvet fra table-layoutverdien til foreldrene

For at en verdi fixedskal ha noen effekt, må bordets bredde settes til noe annet enn auto(standard for widtheiendommen). I demoene nedenfor er alle bordbredder satt til 100%, noe som forutsetter at vi vil at tabellen skal fylle den overordnede beholderen vannrett.

Den beste måten å se effekten av en fast algoritme for tabelloppsett er å bruke en demo.

Se pennedemonstrasjonen for CSSs bordoppsettegenskap av Louis Lazaris (@impressivewebs) på CodePen.

Når du først ser på demoen ovenfor, vil du legge merke til at utformingen av tabellkolonnene er ubalansert og vanskelig. På det tidspunktet bruker tabellen nettleserens standardalgoritme til å definere hvordan du skal legge opp tabellen, noe som betyr at innholdet vil diktere oppsettet. Demoen overdriver dette ved å inkludere en lang tekststreng i en tabellcelle, mens alle de andre tabellcellene bruker bare to ord hver. Som du kan se, utvider nettleseren den første kolonnen for å imøtekomme den større delen av innholdet.

Hvis du klikker på knappen "Bytt tabelloppsett: fast", ser du hvordan tabelloppsettet ser ut når den "faste" algoritmen brukes. Når table-layout: fixeddet brukes, dikterer ikke innholdet lenger oppsettet, men i stedet bruker nettleseren definerte bredder fra tabellens første rad for å definere kolonnebredder. Hvis det ikke er noen bredder på første rad, blir kolonnebreddene delt likt over tabellen, uavhengig av innholdet i cellene.

Flere eksempler kan bidra til å gjøre dette tydeligere. I den følgende demoen har tabellen et element hvis første element har bredden på 400px. Legg merke til i dette tilfellet at veksling ikke table-layout: fixedhar noen effekt.

Se pennedemonstrasjonen for CSSs bordoppsettegenskap av Louis Lazaris (@impressivewebs) på CodePen.

Dette skjer fordi standardlayoutalgoritmen i det vesentlige sier "lag den første kolonnen 400 px bred, og distribuer de resterende kolonnene basert på innholdet". Siden de tre andre kolonnene har samme innhold som hverandre, blir det ingen endring. Men la oss nå legge til litt ekstra tekstinnhold i en av de andre kolonnene:

Se pennedemonstrasjonen for CSSs tabelloppsettegenskap med kolbredde og variabelt innhold av Louis Lazaris (@impressivewebs) på CodePen.

Nå, hvis du klikker på vippeknappen, vil du se kolonnene justeres for å imøtekomme et fast oppsett, uavhengig av innhold. Nok en gang skjer det samme; den første kolonnen er satt til 400 px, deretter blir de resterende kolonnene delt likt. Men denne gangen, fordi en av kolonnene har ekstra innhold, er forskjellen merkbar.

Hvordan en fast layoutalgoritme bestemmer kolonnebredder

Følgende to demoer skal hjelpe til med å forstå at den første raden i tabellen er det som hjelper til å definere kolonnebreddene til et bord satt til table-layout: fixed.

Se pennedemonstrasjonen for CSSs bordoppsett med celle i rad 1 gitt definert bredde av Louis Lazaris (@impressivewebs) på CodePen.

I ovennevnte demo har den første cellen i tabellens første rad en bredde på 350 px. Veksling table-layout: fixedjusterer de andre kolonnene, men den første forblir den samme. Prøv nå følgende demo:

Se pennedemonstrasjonen for CSSs bordoppsett med celle i rad 2 gitt definert bredde av Louis Lazaris (@impressivewebs) på CodePen.

I dette tilfellet er det den andre raden som har en bredde knyttet til den første tabellcellen. Nå når det trykkes på veksleknappen, justeres alle kolonnebreddene. Igjen, dette er fordi den faste layoutalgoritmen bruker den første raden til å bestemme kolonnebreddene, og sluttresultatet er at den fordeler bredden likt.

Fordeler med en fast layoutalgoritme

De estetiske fordelene ved bruk table-layout: fixedbør være tydelige fra demonstrasjonene ovenfor. Men den andre store fordelen er ytelse. Spesifikasjonen refererer til den faste algoritmen som en "rask" algoritme, og med god grunn. Nettleseren trenger ikke å analysere hele tabellens innhold før du bestemmer størrelsen på kolonnene; den trenger bare å analysere den første raden. Så resultatet er en raskere behandling av tabellens layout.