Autor Zpráva
Darkry
Profil
Zdravím,

mám takový menší problém s nastylováním tabulky jednoduchého nákupního košíku:


Celý košík chci mít jako jednu tabulku. A společne s tím nastává hned několik problémů:

1) Musím tabulce nastavit border-collapse: collapse; abych neměl mezery mezi jednotlivými buňkami, ale zároveň potřebuji aby byl rámeček oddělený mezi řádky.

2) Nemůžu celém řádku nastavit rámeček a pozadí, protože poslední buňka už ho nemá.

Obrázkovým pozadím řádku se to také moc dobře vyřešit nedá, protože ta délka řádku je pohyblivá.

Nenapadá vás tedy, jak nejlépe to nastylovat?

Díky
Trejpa
Profil
Darkry:
To je problém tabulek, pomocí border-collapse a border-spacing nelze rozlišit svislé a vodorovné mezery.

Obrázkovým pozadím se to vyřešit dá velmi elegantně a to bez použití dalších prvků. Nicméně je nutno pojmenovávat první a poslední buňku v řádku, protože ne každý prohlížeč zvládne adresovat buňky podle elementů col a colgroup, potažmo pseudoelementů :first nebo :first-child.

Formátování tabulky
Darkry
Profil
Trejpa:
Díky.

Nakonec jsem to vyřešil tím, že jsem za každý řádek přidal jeden prázdný a pozadí a rámeček jsem nenastavil řádkům, ale přímo buňkám tím pádem jsem nebyl nucen použít žádný obrázek a vše funguje jak má.
peta
Profil
http://axpsu.fpf.slu.cz/~web/navody/html/tabulky.htm

Obrazek je fajn, ale... Kdyz text pretece pres 2 radky, obrazek se spatne vykresli. Jinak je to dobre reseni.

Osobne bych oramovani podbarvene bunky uz nedelal. spis podbarvil sudy / lichy radek.

ciste teoreticky bych to resil jako:
-------ramecek nahore ------
|..............................................................................................................................|
|----- obrazek left=0% ---- ----- obrazek left=50% ---- ----- obrazek left=100% ----|
obrazek bottom = 100%
U obrazku spodek bude mit pruhlednych treba 5px. Musis pouzit:fisrt-child, :last-child (ktere funguje ale od IE7 tusim se spravnym doctype) nebo class na bunky.
<style>tr td {} tr td.fist {} tr td.last {}</style>
<tr><td class=first></td> <td></td> <td class=last></td> </tr>

<style>tr td {} tr td:fist-child {} tr td:last-child {}</style>
<tr><td></td> <td></td> <td></td> </tr>

To tve reseni, pridat tam prazdny radek je take dobre reseni, ale pridava to html kod.

Vaše odpověď

Mohlo by se hodit


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: