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.

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 | ... |