Un petit tip que je partage avec vous aujourd’hui car j’ai pas mal cherché sur internet une solution qui me convenait.
Le problème que j’ai rencontré est le suivant :
Sous Google Chrome et Safari, l’image de fond attribuée à ma ligne de tableau <tr> ne s’affichait pas correctement, et était reprise par chaque cellule du tableau.
Voici l’aperçu problématique :
Voici le code html du tableau
<table border="0" cellspacing="1" cellpadding="1"> <tbody> <tr class="bg_realisation_small"> <td class="bg_realisation_gauche_chrome"> <h3>AVANT</h3> <img style="width: 260px; height: 195px;" src="realisations-5.jpg" alt="" /></td> <td class="bg_realisation_droite_chrome"> <h3>APRES</h3> <img style="width: 260px; height: 195px;" src="realisations-4.jpg" alt="" /></td> </tr> </tbody> </table> |
Le principe du hack constiste à supprimer le fond de la balise tr et à l’appliquer aux éléments td en spécifiant la position du fond.
Voici le Css du correctif :
tr.bg_realisation_small |