Tafel-indeling - CSS-trucs | CSS Almanac 2025

De table-layouteigenschap definieert welk algoritme de browser moet gebruiken om tabelrijen, cellen en kolommen op te maken.

table ( table-layout: fixed; )

Zoals uitgelegd in de CSS2.1-specificatie, is de tafelopmaak in het algemeen meestal een kwestie van smaak en zal deze variëren afhankelijk van de ontwerpkeuzes. Browsers passen echter automatisch bepaalde beperkingen toe die bepalen hoe tabellen worden ingedeeld. Dit gebeurt wanneer de table-layouteigenschap is ingesteld op auto(de standaard). Maar deze beperkingen kunnen worden opgeheven wanneer table-layoutis ingesteld op fixed.

Waarden

auto: de standaard. Het automatische algoritme van de browser wordt gebruikt om te bepalen hoe de rijen, cellen en kolommen van een tabel zijn ingedeeld. De resulterende tabelopmaak is doorgaans afhankelijk van de inhoud van de tabel.
fixed: Met deze waarde negeert de lay-out van de tabel de inhoud en gebruikt in plaats daarvan de breedte van de tabel, elke opgegeven breedte van kolommen en waarden voor rand- en celafstand. De gebruikte kolomwaarden zijn gebaseerd op breedtes die zijn gedefinieerd in kolommen of cellen voor de eerste rij van de tabel.
inherit: geeft aan dat de waarde wordt geërfd van de table-layoutwaarde van de bovenliggende waarde

Om een waarde van fixedenig effect te laten hebben, moet de breedte van de tabel worden ingesteld op iets anders dan auto(de standaardwaarde voor de widtheigenschap). In de onderstaande demo's zijn alle tabelbreedtes ingesteld op 100%, wat ervan uitgaat dat we willen dat de tabel de bovenliggende container horizontaal vult.

De beste manier om de effecten van een algoritme voor een vaste tabelopmaak te zien, is door een demo te gebruiken.

Zie de pendemo voor CSS's table-layout-eigenschap door Louis Lazaris (@impressivewebs) op CodePen.

Wanneer u de bovenstaande demo voor het eerst bekijkt, zult u merken dat de lay-out van de tabelkolommen onevenwichtig en onhandig is. Op dat moment gebruikt de tabel het standaardalgoritme van de browser om te bepalen hoe de tabel moet worden ingedeeld, wat betekent dat de inhoud de lay-out bepaalt. De demo overdrijft dit feit door een lange reeks tekst in één tabelcel op te nemen, terwijl alle andere tabelcellen elk slechts twee woorden gebruiken. Zoals u kunt zien, breidt de browser de eerste kolom uit om plaats te bieden aan het grotere deel van de inhoud.

Als u op de knop "Tafel-indeling wisselen: vast" klikt, ziet u hoe de indeling van de tabel eruitziet als het algoritme "vast" wordt gebruikt. Wanneer table-layout: fixedwordt toegepast, dicteert de inhoud niet langer de lay-out, maar in plaats daarvan gebruikt de browser alle gedefinieerde breedtes van de eerste rij van de tabel om kolombreedtes te definiëren. Als er geen breedte aanwezig is op de eerste rij, worden de kolombreedtes gelijk verdeeld over de tabel, ongeacht de inhoud in de cellen.

Verdere voorbeelden kunnen dit duidelijker maken. In de volgende demo heeft de tabel een element waarvan het eerste element een breedte heeft van 400px. Let op: in dit geval heeft omschakelen table-layout: fixedgeen effect.

Zie de pendemo voor CSS's table-layout-eigenschap door Louis Lazaris (@impressivewebs) op CodePen.

Dit gebeurt omdat het standaardlay-outalgoritme in wezen zegt "maak de eerste kolom 400 px breed en verdeel de resterende kolommen op basis van hun inhoud". Aangezien de andere drie kolommen dezelfde inhoud hebben, verandert er niets. Maar laten we nu wat extra tekstinhoud toevoegen aan een van de andere kolommen:

Zie de pendemo voor CSS's table-layout-eigenschap met col width en variabele inhoud door Louis Lazaris (@impressivewebs) op CodePen.

Als u nu op de schakelknop klikt, ziet u dat de kolommen worden aangepast aan een vaste lay-out, ongeacht de inhoud. Opnieuw gebeurt hetzelfde; de eerste kolom is ingesteld op 400px en de overige kolommen worden gelijk verdeeld. Maar dit keer, omdat een van de kolommen extra inhoud heeft, is het verschil merkbaar.

Hoe een algoritme met vaste lay-out de kolombreedte bepaalt

De volgende twee demo's zouden moeten helpen begrijpen dat de eerste rij van de tabel helpt bij het definiëren van de kolombreedtes van een tabel ingesteld op table-layout: fixed.

Zie de pendemo voor CSS's table-layout met cel in rij 1 gegeven gedefinieerde breedte door Louis Lazaris (@impressivewebs) op CodePen.

In de bovenstaande demo heeft de eerste cel in de eerste rij van de tabel een breedte van 350 px. Door te schakelen worden table-layout: fixedde andere kolommen aangepast, maar de eerste blijft hetzelfde. Probeer nu de volgende demo:

Zie de Pen Demo voor CSS's table-layout met cel in rij 2 gegeven gedefinieerde breedte door Louis Lazaris (@impressivewebs) op CodePen.

In dit geval is het de tweede rij waarvan de breedte is gekoppeld aan de eerste tabelcel. Wanneer nu op de schakelknop wordt geklikt, worden alle kolombreedten aangepast. Nogmaals, dit komt doordat het algoritme met vaste lay-out de eerste rij gebruikt om de kolombreedtes te bepalen, en het eindresultaat is dat het de breedtes gelijk verdeelt.

Voordelen van een algoritme met een vaste layout

De esthetische voordelen van het gebruik table-layout: fixedmoeten duidelijk worden uit de bovenstaande demonstraties. Maar het andere grote voordeel is de prestatie. De specificatie verwijst naar het vaste algoritme als een "snel" algoritme, en met goede reden. De browser hoeft niet de volledige inhoud van de tabel te analyseren om de grootte van de kolommen te bepalen; het hoeft alleen de eerste rij te analyseren. Het resultaat is dus een snellere verwerking van de tafelopmaak.