Let op! website nog in ontwikkeling...
Back to top

Fixed Table Layouts

Een optie die al sinds CSS2 beschikbaar is, maar nog steeds weinig wordt gebruikt is de table-layout: fixed. Hiermee kunnen we tabellen namelijk veel strakker maken dan met de default waarde.

catalog/Blog/Fixed Table Layouts.jpg
28 juli 2024 - 17:07
Laatste update: 01 oktober 2024 - 15:10
table
{
    table-layout:fixed;
}

De default waarde is auto, en dat is waar we het meeste gebruik van maken, Echter is het naar mijn mening niet de meest voor de hand liggende optie. De nadelen:

  • De auto waarde berekend de breedte namelijk door de breedste niet af te breken waarde van de cell te gebruiken.
  • Doordat de gehele table doorlopen moet worden om de breedte van een kolom te bepalen kan dit een stuk trager zijn. 

Hieronde even een voorbeeld:

table-layout: auto;

 

Ik ben een tabel en dit is een extra cel

 

Ik ben zo breed als de cell en ik ook

 

Een cel kan makkelijk 100% breed worden and zal dan ook stoppen om op die manier niet de hele breedte te nemen

 

Als het niet gespecificeerd wordt, dan word de breedte van de cellen afhankelijk van de inhoud hiervan. Deze cel is breeder, of niet? 

 

Maar als het gespecificeerd wordt, dan wordt de breedte gerespecteerd, en zullen deze 2 kolommen dus even breed zijn

 

Maar het klopt niet altijd deze cellen zijn beide 750pixels, en toch wordt het niet 50/50

 

Maar het klopt niet altijd bij gebruik van nowrap wordt de cel breeder dan we specificeren...

 

table-layout: fixed;

25% 50% 25%
De tekst in andere dan de 1st rij heeft geen invloed op de breedte van de  kolommen meer. 

 

De cel wordt niet kleiner als er minder tekst in staat 50/50 ...

 

De cel wordt niet kleiner als er minder tekst in staat 75/25 ...