Abydos Ma vie, mon univers, ma passion.

CSS : tr et background

Aujourd'hui en faisant de l'intégration web j'ai voulu ajouter une image de fond sur une balise tr, c'est bien la première fois que je le faisais, honnêtement je ne pensais pas que c'était possible et encore moins valide (W3C)... et ben je me trompais !

Le but était d'avoir une sorte de box avec un effet d'ombre, ce qui implique 3 images : header, le centre qui est répété (repeat-y) et le footer. Dans cette box j'avais un tableau qui empiétait sur le header, comme le montre l'image :

Pour le code HTML j'ai donc fais comme ceci :

[...]



Colonne 1
Colonne 2

Après plusieurs heures passés à intégrer le design, je me suis aperçu que ça ne passait pas sur IE 6 et 7 : L'image est répétée dans chaque td, comme le montre l'image :

Après avoir cherché sur google j'ai trouvé une solution qui fixe le problème :

tr {
    background-image: url(toto);
}
td {
    background-position: expression(-this.offsetLeft);
}

ou sur un tbody :

tbody {
    background-image:url(foo);
}
td {
    background-position:expression(-this.offsetLeft + " " + -this.offsetTop);
}

Pour tester l'astuce voici un lien. Si vous avez trouvé mieux n'hésitez pas à me le dire, j'apprends chaque jour.