Eksempler på brug af table-layout
Siden er opdateret 23.1.2008
Billede i celle med fast bredde
Tabel med table-layout:auto (eller uden table-layout):
<table style="table-layout:auto;">
<tr style="height:30px;">
<td style="width:33%;">
...
| tekst | tekst | tekst |
| tekst |  |
tekst |
| tekst | tekst | tekst |
Hvis man vælger table-layout:auto, kan man med samme resultat helt undlade at definere table-layout, da auto er default-værdien.
Tabel med table-layout:fixed:
<table style="table-layout:fixed;">
<tr style="height:30px;">
<td style="width:33%;overflow:hidden:">
...
| tekst | tekst | tekst |
| tekst | |
tekst |
| tekst | tekst | tekst |
Ved at definere table-layout:fixed; på table og definere overflow:hidden; på td sikrer man, at browseren kender kolonnernes bredde allerede når første række er indlæst. Derved bliver hele tabellen optegnet meget hurtigere end hvis en celle med et meget bredt indhold længere nede kunne ændre kolonnernes samlede optegning.
Pt. virker dette dog ikke med grafik - kun tekst - i Opera. Jeg arbejder på at finde ud af hvorfor.
Hvis man tvinger Internet Exporer i quiks-mode, vil IE også kunne fastlåse rækkehøjden, når table-layout er sat til fixed.
Andre browsere tillader ikke fastlåsning af rækkehøjde i en tabel - end ikke max-height kan gøre det. Her vil rækkehøjden altid afhænge af indholdet i celle med det højeste indhold.
Tekst i celle med fast bredde
Tabel med table-layout:auto (eller uden table-layout):
<table style="table-layout:auto;">
<tr style="height:30px;">
<td style="width:33%;>
...
| tekst | tekst | tekst |
| tekst | Her er en masse tekst, som ikke er blevet sat til ikke at blive ombrudt. | |
| tekst | tekst | tekst |
Tabel med table-layout:fixed:
| tekst | tekst | tekst |
| tekst | Her er en masse tekst, som med css er blevet sat til ikke at blive ombrudt. | |
| tekst | tekst | tekst |
<span style="white-space:nowrap">Her er en masse tekst, som med css er blevet sat til ikke at blive ombrudt.</span>
