Laatst probeerde ik bij een tabel de rijen om en om een aparte achtergrond te geven. De ene rij wit, de volgende rij een afbeelding. Als afbeelding gebruikte ik een gradiënt. Dit bleek echter alleen te werken in Firefox en Safari. Internet Explorer en Opera gaven niet de rij, maar elke cel in de rij apart de afbeelding als achtergrond. Het gevolg was dat de gradiënt niet meer doorliep, maar in elke kolom steeds opnieuw begon. Uiteindelijk bedacht ik een oplossing.
De oorspronkelijke opzet was:
table { background: #fff; }
tr.alt { background: url(gradient.jpg); }
En dan als HTML:
<table>
<tr class="alt"><td></td><td></td></tr>
<tr><td></td><td></td></tr>
<tr class="alt"><td></td><td></td></tr>
<tr><td></td><td></td></tr>
</table>
Op die manier kreeg de tabel als geheel een witte achtergrond. En om en om kreeg één rij de gradiënt als achtergrond. Dit draaide ik echter om. De gradënt werd de achtergrond van de hele tabel. En om en om kreeg één rij een witte achtergrond.
table { background: url(gradient.jpg); }
tr.alt table { background: #fff; }
HTML:
<table>
<tr><td></td><td></td></tr>
<tr class="alt"><td></td><td></td></tr>
<tr><td></td><td></td></tr>
<tr class="alt"><td></td><td></td></tr>
</table>
Zo werkte het in alle browsers. Maar dit werkte natuurlijk alleen omdat ik één rij een egale kleur gaf. Wanneer ook die rij een gradiënt moest hebben, maar dan van een andere kleur, zou ik geen oplossing geweten hebben. Zo zie je maar weer dat niet alle browsers zich aan de standaard houden. En dat Internet Explorer bij degenen hoort die het fout doen, is natuurlijk geen verrassing...
Reacties