Stylování rámečků tabulky

Gumový layout tabulky

Chceme, aby sloupce měly šířky

1. 20%
2. 300px (to je tolikhle: ||)
3. 50px (to je tolikhle: ||)
4. zbytek do šířky tabulky/stránky

Tabulka má vždy "100%" šířky okna (není-li uvedeno jinak).

Otestování

Prohlížeč zúžit tak, aby se obrázek 300px nahoře nevešel na šířku, pak maximalizovat na celou obrazovku. Vychází z toho, že

1. CSS (varianty 1,2) a šířky sloupců (varianta 4) se vždy snaží vejít do okna, tj. nerespektuje šířku při zmenšení. Lépe vychází 1. a 4., protože levých 20% odpovídá.
2. Varianta 3 vcelku pochopitelně zabere jen na zmenšení, nikoli na zvětšení.
3. Pokud je třeba opravdu zachovat šířku, jediná možnost je 5, tj. kombinace obrázků a šířek.

1. Pomocí CSS

První tři sloupce mají nastavenou šířku přes vlastnost "width" (pomocí selektoru "class"), přičemž absolutní šířky jsou označeny klauzulí "!important". Poslední sloupec je ponechán osudu.

2. Pomocí CSS s auto šířkou tabulky

Stejně jako předchozí, jen tabulka nemá nastavenou šířku.

3. Pomocí obrázků

První sloupec má atribut width="20%", další nemají atribut ale obsahují obrázek 1x1 pixel roztažený na příslušnou šířku přes width=...

20%

300

50

zbytek

Stejně jako předchozí, ale obrázky jsou vyrobené na dané šířky (300px, 50px).

20%

300

50

zbytek

4. Pomocí šířek

Sloupce tabulky mají nastavenou šířku přes atribut width=..., poslední je ponechán osudu.

5. Kombinace obrázků a šířek

Ve sloupcích jsou brázky na míru, a sloupce mají navíc určenou šířku.

20%

300

50

zbytek