Discussion :

[Danny Blue]

Bonjour à tous,

Problème rencontré sur IE 6 et 7 (fonctionnel sous Firefox 2). Le soucis est que lorsque je souhaite appliquer un background-image à une <tr> qui contient des cellules (<th> ou <td>) sans background-image, tout va bien. Dès lors que j'applique un background-image à mon <tr> ET à mes cellules : ca ne m'affiche plus le background-image du <tr> mais seulement celui des cellules (td/th).

Quelqu'un aurait une solution à ce soucis?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
.myGrid 
{
	width:565px;
	border:1px solid #99BBE8;
}
 
.HeaderColmuns { text-align:left; height:22px; background:url(images/z_grid_headerBg.png) repeat-x; }
.myGrid thead th { padding-left:3px; color:#15428B; background:url(images/z_grid_headerSep.gif) right no-repeat; }

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<table class="myGrid" cellpadding="0" cellspacing="0">
            <thead>
                <tr class="HeaderColmuns">
                    <th title="...">Nom Colonne</th>
                    <th title="...">Nom Colonne</th>
                    <th title="...">Nom Colonne</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>data</td>
                    <td>data</td>
                    <td>data</td>
                </tr>
            </tbody>
</table>

Merci d'avance pour vos réponses qui je l'espère, m'apporteront une solution (enfin) à ce problème.

[E.Bzz]

Bonjour,
précise la finallité.
Ce fonctionnement semble normal : si tu veux voir un background du tr, pourquoi en mettre dans les td ?
Et quel est le résultat attendu, si tu peux mettre les 2 ?

A+

[Danny Blue]

C'est pour avoir ca (je te screen le résultat sur firefox).

(1) = TR (la ligne)
(2) = le petit séparateur entre chaque cellule du theader

[E.Bzz]

Et en laissant juste l'image sur le tr, mais en mettant un border-style:groove ça le fait pas ?
Sur le td : à gauche ou à droite ...

A+

[Danny Blue]

Et en laissant juste l'image sur le tr, mais en mettant un border-style:groove ça le fait pas ?
Sur le td : à gauche ou à droite ...
A+

Disons que la bordure fait toute la hauteur de la cellule et c'est pas très jolie, mon background à moi avait une petite hauteur et ca rendait mieux. Donc ca serait effectivement une solution "de secours" mais j'aimerais que ce soit comme je le souhaitais si c'est toutefois possible ;-)

Merci beaucoup en tout cas E.Bzz!

[E.Bzz]

Disons que la bordure fait toute la hauteur de la cellule et c'est pas très jolie

En augmentant le padding (top+bottom), ça devrait compenser ...

A+

[robert59]

J'ai eu le même souci que toi Danny Blue et j'ai trouvé la solution

Il te suffit de déplacer ton z_grid_headerBg.png du TR au TABLE :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.myGrid {
	width:565px;
	border:1px solid #99BBE8;
	background:url(images/z_grid_headerBg.png) repeat-x;
}
 
.HeaderColmuns {
	text-align:left;
	height:22px;
}
 
.myGrid thead th {
	padding-left:3px;
	color:#15428B;
	background:url(images/z_grid_headerSep.gif) right no-repeat;
}

Et ca marche