Tabel-layout - CSS-tricks | CSS Almanak 2025

De table-layoutejendom definerer, hvad algoritme browseren skal bruge til at lægge ud tabelrækker, celler og kolonner.

table ( table-layout: fixed; )

Som forklaret i CSS2.1-specifikationen er bordlayout generelt et spørgsmål om smag og varierer afhængigt af designvalg. Browsere vil dog automatisk anvende visse begrænsninger, der definerer, hvordan tabeller er lagt ud. Dette sker, når table-layoutejendommen er indstillet til auto(standard). Men disse begrænsninger kan løftes, når den table-layouter indstillet til fixed.

Værdier

auto: standard. Browserens automatiske algoritme bruges til at definere, hvordan en tabells rækker, celler og kolonner er lagt ud. Det resulterende bordlayout afhænger generelt af indholdet af tabellen.
fixed: Med denne værdi ignorerer tabellens layout indholdet og bruger i stedet bordets bredde, en hvilken som helst specificeret bredde på kolonner og værdier for kant- og celleafstand. De anvendte kolonneværdier er baseret på bredder defineret i kolonner eller celler i den første række i tabellen.
inherit: angiver, at værdien arves fra table-layoutværdien af dens overordnede

For at en værdi fixedskal have nogen effekt, skal bordets bredde indstilles til noget andet end auto(standard for widthejendommen). I demoerne nedenfor er alle bordbredder indstillet til 100%, hvilket antager, at vi ønsker, at tabellen skal udfylde dens overordnede container vandret.

Den bedste måde at se effekterne af en fast tabellayoutalgoritme på er at bruge en demo.

Se Pen Demo for CSSs tabellayout-ejendom af Louis Lazaris (@impressivewebs) på CodePen.

Når du først ser ovenstående demo, vil du bemærke, at tabelkolonnernes layout er ubalanceret og akavet. På det tidspunkt bruger tabellen browserens standardalgoritme til at definere, hvordan tabellen skal opstilles, hvilket betyder, at indholdet vil diktere layoutet. Demoen overdriver denne kendsgerning ved at inkludere en lang tekststreng i en tabelcelle, mens alle de andre tabelceller kun bruger to ord hver. Som du kan se, udvider browseren den første kolonne til at rumme den større bit indhold.

Hvis du klikker på knappen "Skift bordlayout: fast", ser du, hvordan bordlayoutet ser ud, når "fast" algoritmen bruges. Når table-layout: fixeddet anvendes, dikterer indholdet ikke længere layoutet, men i stedet bruger browseren definerede bredder fra bordets første række til at definere søjlebredder. Hvis der ikke er nogen bredder på den første række, deles søjlebredderne ligeligt på tværs af tabellen, uanset indholdet inde i cellerne.

Yderligere eksempler kan hjælpe med at gøre dette tydeligere. I den følgende demo har tabellen et element, hvis første element har en bredde på 400px. Bemærk i dette tilfælde, at skifte ikke table-layout: fixedhar nogen virkning.

Se Pen Demo for CSSs tabellayout-ejendom af Louis Lazaris (@impressivewebs) på CodePen.

Dette sker, fordi standardlayoutalgoritmen i det væsentlige siger "lav den første kolonne 400 px bred, og distribuer de resterende kolonner baseret på deres indhold". Da de andre tre kolonner har samme indhold som hinanden, vil der ikke være nogen ændring. Men lad os nu tilføje noget ekstra tekstindhold til en af de andre kolonner:

Se Pen Demo for CSSs tabellayout-egenskab med col-bredde og variabelt indhold af Louis Lazaris (@impressivewebs) på CodePen.

Hvis du nu klikker på skifteknappen, ser du kolonnerne justeres til at rumme et fast layout, uanset indhold. Igen sker det samme; den første kolonne er indstillet til 400 pixel, så de resterende kolonner er delt ligeligt. Men denne gang, fordi en af kolonnerne har ekstra indhold, er forskellen mærkbar.

Hvordan en fast layoutalgoritme bestemmer søjlebredder

De følgende to demoer skal hjælpe med at forstå, at den første række i tabellen er det, der hjælper med at definere kolonnebredderne i et tabelindstillet til table-layout: fixed.

Se Pen Demo for CSSs bordlayout med celle i række 1 givet defineret bredde af Louis Lazaris (@impressivewebs) på CodePen.

I ovenstående demo har den første celle i tabellens første række en bredde på 350 pixel. Skift table-layout: fixedjusterer de andre kolonner, men den første forbliver den samme. Prøv nu følgende demo:

Se Pen Demo for CSS's bordlayout med celle i række 2 givet defineret bredde af Louis Lazaris (@impressivewebs) på CodePen.

I dette tilfælde er det den anden række, der har en bredde knyttet til sin første tabelcelle. Nu når der trykkes på skifteknappen, justeres alle søjlebredder. Igen skyldes dette, at den faste layoutalgoritme bruger den første række til at bestemme søjlebredderne, og slutresultatet er, at den fordeler bredderne ens.

Fordele ved en fast layoutalgoritme

De æstetiske fordele ved at bruge table-layout: fixedskal være tydelige fra demonstrationerne ovenfor. Men den anden store fordel er ydeevne. Specifikationen henviser til den faste algoritme som en “hurtig” algoritme og med god grund. Browseren behøver ikke at analysere hele bordets indhold, før størrelsen på kolonnerne bestemmes; det skal kun analysere den første række. Så resultatet er en hurtigere behandling af bordets layout.