Bordslayout - CSS-tricks | CSS Almanack 2025

De table-layoutfastighets definierar vad algoritm webbläsaren ska använda för att lägga ut tabellrader, celler och kolumner.

table ( table-layout: fixed; )

Som förklaras i CSS2.1-specifikationen är tabelllayouten i allmänhet en smakfråga och varierar beroende på designval. Webbläsare tillämpar dock automatiskt vissa begränsningar som definierar hur tabellerna läggs ut. Detta händer när table-layoutegenskapen är inställd på auto(standard). Men dessa begränsningar kan tas bort när den table-layoutär inställd på fixed.

Värden

auto: standarden. Webbläsarens automatiska algoritm används för att definiera hur en tabells rader, celler och kolumner är utformade. Den resulterande tabelllayouten är vanligtvis beroende av innehållet i tabellen.
fixed: Med detta värde ignorerar tabellens layout innehållet och använder istället tabellens bredd, vilken som helst specifik kolumnbredd och gränsvärden och cellavståndsvärden. Kolumnvärdena som används är baserade på bredder definierade i kolumner eller celler för den första raden i tabellen.
inherit: indikerar att värdet ärvs från table-layoutvärdet på dess förälder

För att ett värde fixedska ha någon effekt måste tabellens bredd ställas in på något annat än auto(standard för widthegenskapen). I demos nedan är alla tabellbredder inställda på 100%, vilket förutsätter att vi vill att tabellen ska fylla dess överordnade behållare horisontellt.

Det bästa sättet att se effekterna av en algoritm med fast bordslayout är att använda en demo.

Se Pen Demo för CSS: s bordslayoutegenskap av Louis Lazaris (@impressivewebs) på CodePen.

När du först visar ovanstående demo kommer du att märka att tabellkolumnernas layout är obalanserad och besvärlig. Vid den tidpunkten använder tabellen webbläsarens standardalgoritm för att definiera hur tabellen ska läggas, vilket innebär att innehållet kommer att diktera layouten. Demon överdriver detta genom att inkludera en lång textsträng i en tabellcell, medan alla andra tabellceller bara använder två ord vardera. Som du kan se expanderar webbläsaren den första kolumnen för att rymma den större biten av innehåll.

Om du klickar på knappen "Toggle table-layout: fixed" ser du hur tabelllayouten ser ut när den "fixerade" algoritmen används. När det table-layout: fixedtillämpas dikterar innehållet inte längre layouten, utan istället använder webbläsaren definierade bredder från tabellens första rad för att definiera kolumnbredder. Om det inte finns några bredder på den första raden delas kolumnbredderna lika över tabellen, oavsett innehållet i cellerna.

Ytterligare exempel kan bidra till att göra detta tydligare. I följande demo har tabellen ett element vars första element har en bredd på 400px. Observera i det här fallet att växling inte table-layout: fixedhar någon effekt.

Se Pen Demo för CSS: s bordslayoutegenskap av Louis Lazaris (@impressivewebs) på CodePen.

Detta händer eftersom standardlayoutalgoritmen i princip säger "gör den första kolumnen 400px bred och fördela de återstående kolumnerna baserat på deras innehåll". Eftersom de andra tre kolumnerna har samma innehåll som varandra kommer det inte att ändras. Men nu ska vi lägga till lite extra textinnehåll i en av de andra kolumnerna:

Se Pen Demo för CSS: s tabelllayoutegenskap med kolbredd och variabelt innehåll av Louis Lazaris (@impressivewebs) på CodePen.

Om du nu klickar på växlingsknappen ser du kolumnerna justeras för att rymma en fast layout, oavsett innehåll. Återigen händer samma sak; den första kolumnen är inställd på 400 pixlar, sedan delas de återstående kolumnerna lika. Men den här gången, eftersom en av kolumnerna har extra innehåll, märks skillnaden.

Hur en fast layoutalgoritm bestämmer kolumnbredder

Följande två demos bör hjälpa till att förstå att den första raden i tabellen är det som hjälper till att definiera kolumnbredden för en tabell som är inställd på table-layout: fixed.

Se Pen Demo för CSSs bordslayout med cell i rad 1 angiven definierad bredd av Louis Lazaris (@impressivewebs) på CodePen.

I ovanstående demo har den första cellen i tabellens första rad en bredd på 350 pixlar. Växling table-layout: fixedjusterar de andra kolumnerna, men den första förblir densamma. Försök nu med följande demo:

Se Pen Demo för CSSs bordslayout med cell i rad 2 angiven definierad bredd av Louis Lazaris (@impressivewebs) på CodePen.

I det här fallet är det den andra raden som har en bredd kopplad till sin första tabellcell. Nu när du trycker på växlingsknappen justeras alla kolumnbredder. Återigen beror detta på att den fasta layoutalgoritmen använder den första raden för att bestämma kolumnbredderna, och slutresultatet är att den fördelar bredderna lika.

Fördelar med en fast layoutalgoritm

De estetiska fördelarna med att använda table-layout: fixedbör framgå av demonstrationerna ovan. Men den andra stora fördelen är prestanda. Specifikationen hänvisar till den fasta algoritmen som en ”snabb” algoritm och med goda skäl. Webbläsaren behöver inte analysera hela tabellens innehåll innan kolumnernas storlek bestäms. det behöver bara analysera den första raden. Så resultatet är en snabbare bearbetning av tabellens layout.