rowspan sous Firefox et Chrome

**laurentSc** · 25/03/2013, 19h35

Bonjour,

j'ai un tableau html avec un rowspan qui s'affiche bien sous Google mais mal sous Firefox et Chrome ; c'est comme si le rowspan n'est pas pris en compte.
Peut-être important : quand je fais "rafraichir", ça s'affiche bien, mais dès que j'active une fonction javascript qui se déclenche sur l'événement "onmouseover", le "rowspan" est perdu.

Voici mon code :

Code html+javascript :

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
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <script type="text/javascript"> //-----------------------
function see_bubble(img_){
var Obj = document.getElementById('infobulle');
Obj.innerHTML = "<img src='" +img_ +"' alt='" +img_ +"'>";
Obj.style.display = "block";
}
//--------------------
function kill_bubble(){
var Obj = document.getElementById('infobulle');
Obj.innerHTML = '<img src="http://zupimages.net/up/2/1656267263.png"/>';
Obj.style.display = "block";
}
  </script>
  <meta http-equiv="content-type"
 content="text/html; charset=utf-8">
</head>
<body>
<table width="100%">
  <tbody>
    <tr>
      <td align="center">
      <h4 align="center"> <b><u>Liste
des pi&egrave;ces d&eacute;tach&eacute;es</u></b></h4>
      <table style="border-collapse: collapse;" align="center"
 bgcolor="#ffffff" border="1" bordercolor="#993366"
 cellpadding="3" cellspacing="0">
        <tbody>
          <tr>
            <td align="left" bgcolor="#660033"><font
 color="#ffffff"><b>D&eacute;signation<br>
            </b></font></td>
            <td align="left" bgcolor="#660033"> 
etc.
          </tr>
          <tr>
            <td align="left"><font color="#000000">Douchette
de toilette</font></td>
            <td align="left"><font color="#000000">
            <a
 href="http://www.groupe-reval-sav.com/Photopiece/test.jpg"
 onmouseover="see_bubble('http://www.groupe-reval-sav.com/Photopiece/test.jpg');"
 onmouseout="kill_bubble();">42OF</a> </font></td>
            <td align="left"><font color="#000000">1</font></td>
            <td id="infobulle" rowspan="13"
 align="left"><font color="#000000"><img
 src="http://zupimages.net/up/2/1656267263.png"></font></td>
          </tr>
    etc...
        </tbody>
      </table>
      </td>
    </tr>
  </tbody>
</table>
</body>
</html>

Quelle serait une solution ?

**Muchos** · 25/03/2013, 21h11

qui s'affiche bien sous Google mais mal sous Firefox et Chrome

Bon! Sauf votre respect, mon cher laurentSc, votre code n'est pas valide :

TABLE imbriquées,
Attributs dépréciés,
FONT est aussi dépréciée et U est mal utilisée.

Sinon, ROWSPAN n'a aucune raison de ne pas fonctionner. Néanmoins, vous cherchez bien à couvrir 13 ~~colonnes~~ lignes avec une cellule ?

**laurentSc** · 25/03/2013, 22h04

OK, pour font je le savais, sauf que quand j'avais appris le html, c'était pas encore déprécié sinon pour les tables imbriquées et le reste, pas au courant ; tu peux préciser ?

Et sinon, il y a bien en tout 13 lignes, et je voudrais que la colonne de droite couvre ces 13 lignes.

**Bovino** · 25/03/2013, 22h17

Code :

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

<td id="infobulle" rowspan="13" align="left">

Code javascript :

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

1
2
var Obj = document.getElementById('infobulle');
Obj.style.display = "block";

Depuis quand le display d'une balise <td> est block ?
Surtout, à quoi te sert de modifier le display puisque dans tous les cas, tu lui mets block (qui est en plus une mauvaise valeur)...

**NoSmoking** · 25/03/2013, 23h11

Bonjour,
dans ce cas je ne changerai que la scr de l'image, plutôt que de changer le innerHTML de la TD.

**laurentSc** · 26/03/2013, 00h49

Depuis quand le display d'une balise <td> est block ?

Depuis qu'on se trompe

De plus, ce que recommande NoSmoking, c'est sûrement, ce que j'avais fait avant, vu que je passais un truc à display="none". En tout cas, c'est ce que je viens de faire :

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
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <script type="text/javascript"> //-----------------------
function see_bubble(img_){
var Obj = document.getElementById('infobulle');
Obj.src = img_;
Obj.style.display = "block";
}
//--------------------
function kill_bubble(){
var Obj = document.getElementById('infobulle');
Obj.style.display = "none";
}
  </script>
  <meta http-equiv="content-type"
 content="text/html; charset=utf-8">
  <style> .colorwhite {
color:white;
}
.colorblack {
color:black;
}
.souligne {
text-decoration:underline;
}
  </style>
</head>
<body>
<table width="100%">
  <tbody>
    <tr>
      <td align="center">
      <h4 class="souligne" align="center"> <b>Liste
des pi&egrave;ces d&eacute;tach&eacute;es</b></h4>
      <table style="border-collapse: collapse;" align="center"
 bgcolor="#ffffff" border="1" bordercolor="#993366"
 cellpadding="3" cellspacing="0">
        <tbody>
          <tr>
            <td class="colorwhite" align="left"
 bgcolor="#660033"><b>D&eacute;signation<br>
            </b></td>
           etc.
          </tr>
          <tr>
            <td class="colorblack" align="left">Douchette
de toilette</td>
            <td class="colorblack" align="left"> <a
 href="http://www.groupe-reval-sav.com/Photopiece/test.jpg"
 onmouseover="see_bubble('http://www.groupe-reval-sav.com/Photopiece/test.jpg');"
 onmouseout="kill_bubble();">42OF</a></td>
            <td class="colorblack" align="left">1</td>
            <td rowspan="13" class="colorblack"
 align="left"><img id="infobulle"
 src="http://zupimages.net/up/2/1656267263.png"></td>
          </tr>
         etc.
        </tbody>
      </table>
      </td>
    </tr>
  </tbody>
</table>
</body>
</html>

Ca marche bien sous tous les navigateurs. De plus, j'ai remplacé tous les font dépréciés par des classes CSS et de même pour la balise <u>. Mais peut-on m'en dire plus sur les tableaux imbriqués, ce qui n'a pas l'air terrible et ce qu'il y a d'autre de déprécié ?

**Muchos** · 26/03/2013, 01h53

Envoyé par laurentSc

Mais peut-on m'en dire plus sur les tableaux imbriqués, ce qui n'a pas l'air terrible et ce qu'il y a d'autre de déprécié ?

Pensez validateur !
En gros, tous les attributs de style (sauf STYLE !) sont à virer

Pour ce qui est des TABLE imbriquées, je ne vois pas quel contexte pousserait à ça. Et pourtant, j'adore les tableaux !
J'attends donc l'avis de mes camarades sur ce point…

**laurentSc** · 26/03/2013, 03h29

Et voilà pour les attributs de style (je l'ai fait que pour le 1er tableau, flemme pour le 2e (et il est tard)) :

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
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <script type="text/javascript"> //-----------------------
function see_bubble_1(img_){
var Obj = document.getElementById('infobulle_1');
Obj.src = img_;
Obj.style.display = "block";
}
//--------------------
function kill_bubble_1(){
var Obj = document.getElementById('infobulle_1');
Obj.style.display = "none";
}
function see_bubble_2(img_){
var Obj = document.getElementById('infobulle_2');
Obj.src = img_;
Obj.style.display = "block";
}
//--------------------
function kill_bubble_2(){
var Obj = document.getElementById('infobulle_2');
Obj.style.display = "none";
}
  </script>
  <meta http-equiv="content-type"
 content="text/html; charset=utf-8">
  <style> .colorwhite {
color:white;
}
.colorblack {
color:black;
}
.souligne {
text-decoration:underline;
}
.classcenter {text-align:center;}
td.largeur250 {width:250px;}
table.center {margin-left:auto; margin-right:auto;} body {text-align:center;}
table {
border-style:solid;
width:100%;
border-color:#993366;
background-color:white;
padding:3px; }
td.couleurfondtitre {
background-color: rgb(102, 0, 51);
}
td {
border-style:solid;
text-align:center;
border-width:1px;
border-spacing: 0px;
border-collapse: collapse; }
table.padded-table td { padding:3px; }
  </style>
</head>
<body>
<table class="largeur100">
  <tbody>
    <tr>
      <td class="classaligncenter">
      <h4 class="souligne classcenter"> <b>Liste
des pi&egrave;ces d&eacute;tach&eacute;es</b></h4>
      <table style="border-collapse: collapse;"
 class="center couleurfond couleurbord padded-table">
        <tbody>
          <tr>
            <td class="colorwhite classalign couleurfondtitre"><b>D&eacute;signation<br>
            </b></td>
            <td class="colorwhite classalign couleurfondtitre"><b>R&eacute;f&eacute;rence
REVAL</b></td>
            <td class="colorwhite classalign couleurfondtitre"><b>Quantit&eacute;</b></td>
            <td
 class="colorwhite classalign couleurfondtitre largeur250"><b>Visuel</b></td>
          </tr>
          <tr>
            <td class="colorblack classalign">Douchette
de toilette</td>
            <td class="colorblack classalign"> <a
 href="http://www.groupe-reval-sav.com/Photopiece/test.jpg"
 onmouseover="see_bubble_1('http://www.groupe-reval-sav.com/Photopiece/test.jpg');"
 onmouseout="kill_bubble_1();">42OF</a></td>
            <td class="colorblack classalign">1</td>
            <td rowspan="13" class="colorblack classalign"><img
 id="infobulle_1" src="http://zupimages.net/up/2/1656267263.png"></td>
          </tr>
        etc.
        </tbody>
      </table>
      </td>
    </tr>
  </tbody>
</table>
<table width="100%">
  <tbody>
    <tr>
      <td align="center">
      <h4 class="souligne" align="center"> <b>Liste
des pi&egrave;ces d&eacute;tach&eacute;es</b></h4>
      <table style="border-collapse: collapse;" align="center"
 bgcolor="#ffffff" border="1" bordercolor="#993366"
 cellpadding="3" cellspacing="0">
        <tbody>
          <tr>
            <td class="colorwhite" bgcolor="#660033"><b>D&eacute;signation<br>
            </b></td>
            <td class="colorwhite" bgcolor="#660033"><b>R&eacute;f&eacute;rence
REVAL</b></td>
            <td class="colorwhite" bgcolor="#660033"><b>Quantit&eacute;</b></td>
            <td class="colorwhite" bgcolor="#660033"
 width="250"><b>Visuel</b></td>
          </tr>
          <tr>
            <td class="colorblack classalign">Douchette
de toilette</td>
            <td class="colorblack classalign"> <a
 href="http://www.groupe-reval-sav.com/Photopiece/test.jpg"
 onmouseover="see_bubble_2('http://www.groupe-reval-sav.com/Photopiece/test.jpg');"
 onmouseout="kill_bubble_2();">42OF</a></td>
            <td class="colorblack classalign">1</td>
            <td rowspan="13" class="colorblack classalign"><img
 id="infobulle_2" src="http://zupimages.net/up/2/1656267263.png"></td>
          </tr>
         etc.
         </tbody>
      </table>
      </td>
    </tr>
  </tbody>
</table>
</body>
</html>

**Bovino** · 26/03/2013, 09h04

Moais... display: block pour une image... ce n'est pas terrible, mais à la rigueur pourquoi pas...
L'astuce pour ne pas se tromper, c'est d'alterner entre les valeurs 'none' et ''. Ainsi, lorsque tu passes une chaine vide, c'est le style par défaut (celui déclaré dans les CSS ou celui du navigateur) qui est appliqué. Sauf bien sûr si tu définis explicitement display: none dans le CSS.

Pour ce qui concerne les tables imbriquées, ben c'est pas formellement interdit, mais c'est fortement déconseillé. La mise en page à l'aide des tables est peu performant (demande énormément de calculs inutiles au navigateur et quand tu modifies en plus le contenu, tu forces des reflows et repaints coûteux). Donc c'était la mode il y a 15 20 ans, mais ça ne l'est plus. Surtout quand on voit que la première table ne contient qu'une cellule...

Aussi, une ligne de <td> en gras, ça fait plutôt penser à des <th>... qui du coup seraient mieux dans une balise <thead>...

**laurentSc** · 26/03/2013, 12h10

Aussi, une ligne de <td> en gras, ça fait plutôt penser à des <th>... qui du coup seraient mieux dans une balise <thead>...

Je viens de faire ça mais la ligne ne s'affiche plus et je comprends pas :

Code html :

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
17
18
19
20
21
22
23
24
25
26
  <table style="border-collapse: collapse;"
 class="center couleurfond couleurbord padded-table">
        <thead><tr>
          <th class="colorwhite classalign couleurfondtitre"><b>D&eacute;signation</b></th>
          <th class="colorwhite classalign couleurfondtitre"><b>R&eacute;f&eacute;rence
REVAL</b></th>
          <th class="colorwhite classalign couleurfondtitre"><b>Quantit&eacute;</b></th>
          <th
 class="colorwhite classalign couleurfondtitre largeur250"><b>Visuel</b></th>
        </tr>
        </thead>
        <tbody>
          <tr>
            <td class="colorblack classalign">Douchette
de toilette</td>
            <td class="colorblack classalign"> <a
 href="http://www.groupe-reval-sav.com/Photopiece/test.jpg"
 onmouseover="see_bubble_1('http://www.groupe-reval-sav.com/Photopiece/test.jpg');"
 onmouseout="kill_bubble_1();">42OF</a></td>
            <td class="colorblack classalign">1</td>
            <td rowspan="13" class="colorblack classalign"><img
 id="infobulle_1" src="http://zupimages.net/up/2/1656267263.png"></td>
          </tr>
   etc.
</tbody>
      </table>

**NoSmoking** · 29/03/2013, 10h21

Le soucis que tu vas rencontrer en utilisant display:none est que ta ligne risque de changer de hauteur si celle ci n'est pas clairement fixée.

**laurentSc** · 29/03/2013, 20h24

Tu as pleinement raison et d'autre part, j'ai tenté de remplacer des balises ou attributs dépréciés par du CSS, mais autant ce qui est déprécié marche bien autant le reste non : d'abord le tableau qui ne marche pas (comme tu dis, ça bagotte, mais de plus, il y a plein de trucs plus visibles (la ligne de titre (<thead>), et les bords de la table et des cellules)) suivie de la table qui marche :

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
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <script type="text/javascript"> //-----------------------
function see_bubble_1(img_){
var Obj = document.getElementById('infobulle_1');
Obj.src = img_;
Obj.style.display = "block";
}
//--------------------
function kill_bubble_1(){
var Obj = document.getElementById('infobulle_1');
Obj.style.display = "none";
}
function see_bubble_2(img_){
var Obj = document.getElementById('infobulle_2');
Obj.src = img_;
Obj.style.display = "block";
}
//--------------------
function kill_bubble_2(){
var Obj = document.getElementById('infobulle_2');
Obj.style.display = "none";
}
  </script>
  <meta http-equiv="content-type"
 content="text/html; charset=utf-8">
  <style> .colorwhite {
color:white;
}
.colorblack {
color:black;
}
.souligne {
text-decoration:underline;
}
.classcenter {text-align:center;}
th.matable.largeur250 {width:250px;}
table.matable.center {margin-left:auto; margin-right:auto;} body {text-align:center;}
table.matable {
border-style:solid;
width:100%;
border-color:#993366;
background-color:white;
padding:3px; }
th.matble.couleurfondtitre {
background-color: rgb(102, 0, 51);
}
td.matable {
border-style:solid;
text-align:center;
border-width:1px;
border-spacing: 0px;
border-collapse: collapse; }
table.padded-table td { padding:3px; }
.largeur100 {
width:100%;
}
  </style>
  <title>script</title>
</head>
<body>
<div>
<!-- table avec CSS ...et problèmes -->
<table class="largeur100">
  <tbody>
    <tr>
      <td>
      <table style="border-collapse: collapse;"
 class="matable center couleurfond couleurbord padded-table">
        <tbody>
        </tbody><thead>
        <tr>
          <th colspan="4">
          <h4 class="souligne classcenter"> <b>des
pi&egrave;ces d&eacute;tach&eacute;es
Liste</b></h4>
          </th>
        </tr>
        <tr>
          <th class="colorwhite classalign couleurfondtitre">D&eacute;signation</th>
          <th class="colorwhite classalign couleurfondtitre"><b>R&eacute;f&eacute;rence
REVAL</b></th>
          <th class="colorwhite classalign couleurfondtitre"><b>Quantit&eacute;</b></th>
          <th
 class="colorwhite classalign couleurfondtitre largeur250"><b>Visuel</b></th>
        </tr>
        </thead> <tbody>
          <tr>
            <td class="colorblack classalign">Douchette
de toilette</td>
            <td class="colorblack classalign"> <a
 href="http://www.groupe-reval-sav.com/Photopiece/test.jpg"
 onmouseover="see_bubble_1('http://www.groupe-reval-sav.com/Photopiece/test.jpg');"
 onmouseout="kill_bubble_1();">42OF</a></td>
            <td class="colorblack classalign">1</td>
            <td rowspan="13" class="colorblack classalign">
            <div height="100px" width="50"><img
 id="infobulle_1" src="http://zupimages.net/up/2/1656267263.png"></div>
            </td>
          </tr>
          <tr>
            <td class="colorblack classalign">Douchette
de d&eacute;sinfection</td>
            <td class="colorblack classalign"><a
 href="http://www.groupe-reval-sav.com/Photopiece/test.jpg"
 onmouseover="see_bubble_1('http://www.groupe-reval-sav.com/Photopiece/test.jpg');"
 onmouseout="kill_bubble_1();">42OF</a></td>
            <td class="colorblack classalign">1</td>
          </tr>
          <tr>
            <td class="colorblack classalign">Etiquette
"D&eacute;sinfection"&nbsp;</td>
            <td class="colorblack classalign"><a
 href="http://www.groupe-reval-sav.com/Photopiece/test.jpg"
 onmouseover="see_bubble_1('http://www.groupe-reval-sav.com/Photopiece/test.jpg');"
 onmouseout="kill_bubble_1();">42OF</a></td>
            <td class="colorblack classalign">1</td>
          </tr>
          <tr>
            <td class="colorblack classalign">Pince
support de douchette</td>
            <td class="colorblack classalign">1142F </td>
            <td class="colorblack classalign"> 2 </td>
          </tr>
          <tr>
            <td class="colorblack classalign">Vanne
d'arr&ecirc;t&nbsp; </td>
            <td class="colorblack classalign">535F </td>
            <td class="colorblack classalign"> 2 </td>
          </tr>
          <tr>
            <td class="colorblack classalign">Cartouche
thermostatique </td>
            <td class="colorblack classalign">4636F </td>
            <td class="colorblack classalign"> 1 </td>
          </tr>
          <tr>
            <td class="colorblack classalign">Cartouche
thermostatique invers&eacute;e </td>
            <td class="colorblack classalign"> 85 </td>
            <td class="colorblack classalign"> 1 </td>
          </tr>
          <tr>
            <td class="colorblack classalign">Vanne
de remplissage </td>
            <td class="colorblack classalign">561F </td>
            <td class="colorblack classalign">1</td>
          </tr>
          <tr>
            <td class="colorblack classalign">Bobine
de vanne de remplissage </td>
            <td class="colorblack classalign">6693 </td>
            <td class="colorblack classalign"> 1 </td>
          </tr>
          <tr>
            <td class="colorblack classalign">Poign&eacute;e
de vanne de remplissage </td>
            <td class="colorblack classalign">1270 </td>
            <td class="colorblack classalign"> 1 </td>
          </tr>
          <tr>
            <td class="colorblack classalign">Vis
de poign&eacute;e de vanne de
remplissage </td>
            <td class="colorblack classalign">1104F </td>
            <td class="colorblack classalign"> 1 </td>
          </tr>
          <tr>
            <td class="colorblack classalign">Kit
Venturi </td>
            <td class="colorblack classalign">1437545 </td>
            <td class="colorblack classalign"> 1 </td>
          </tr>
          <tr>
            <td class="colorblack classalign">Flacon
de d&eacute;sinfection 1 Litre </td>
            <td class="colorblack classalign">1148F </td>
            <td class="colorblack classalign"> 1 </td>
          </tr>
        </tbody>
      </table>
      </td>
    </tr>
  </tbody>
</table>
<!-- table avec elts dépréciés mais qui marche -->
<table width="100%">
  <tbody>
    <tr>
      <td align="center">
      <h4 class="souligne" align="center"> <b>Liste
des pi&egrave;ces d&eacute;tach&eacute;es</b></h4>
      <table style="border-collapse: collapse;" align="center"
 bgcolor="#ffffff" border="1" bordercolor="#993366"
 cellpadding="3" cellspacing="0">
        <tbody>
          <tr>
            <td class="colorwhite" bgcolor="#660033"><b>D&eacute;signation<br>
            </b></td>
            <td class="colorwhite" bgcolor="#660033"><b>R&eacute;f&eacute;rence
REVAL</b></td>
            <td class="colorwhite" bgcolor="#660033"><b>Quantit&eacute;</b></td>
            <td class="colorwhite" bgcolor="#660033"
 width="250"><b>Visuel</b></td>
          </tr>
          <tr>
            <td class="colorblack classalign">Douchette
de toilette</td>
            <td class="colorblack classalign"> <a
 href="http://www.groupe-reval-sav.com/Photopiece/test.jpg"
 onmouseover="see_bubble_2('http://www.groupe-reval-sav.com/Photopiece/test.jpg');"
 onmouseout="kill_bubble_2();">42OF</a></td>
            <td class="colorblack classalign">1</td>
            <td rowspan="13" class="colorblack classalign"><img
 id="infobulle_2" src="http://zupimages.net/up/2/1656267263.png"></td>
          </tr>
          <tr>
            <td class="colorblack classalign">Douchette
de d&eacute;sinfection</td>
            <td class="colorblack classalign"><a
 href="http://www.groupe-reval-sav.com/Photopiece/test.jpg"
 onmouseover="see_bubble_2('http://www.groupe-reval-sav.com/Photopiece/test.jpg');"
 onmouseout="kill_bubble_2();">42OF</a></td>
            <td class="colorblack classalign">1</td>
          </tr>
          <tr>
            <td class="colorblack classalign">Etiquette
"D&eacute;sinfection"&nbsp;</td>
            <td class="colorblack classalign"><a
 href="http://www.groupe-reval-sav.com/Photopiece/test.jpg"
 onmouseover="see_bubble_2('http://www.groupe-reval-sav.com/Photopiece/test.jpg');"
 onmouseout="kill_bubble_2();">42OF</a></td>
            <td class="colorblack classalign">1</td>
          </tr>
          <tr>
            <td class="colorblack classalign">Pince
support de douchette</td>
            <td class="colorblack classalign">1142F </td>
            <td class="colorblack classalign"> 2 </td>
          </tr>
          <tr>
            <td class="colorblack classalign">Vanne
d'arr&ecirc;t&nbsp; </td>
            <td class="colorblack classalign">535F </td>
            <td class="colorblack classalign"> 2 </td>
          </tr>
          <tr>
            <td class="colorblack classalign">Cartouche
thermostatique </td>
            <td class="colorblack classalign">4636F </td>
            <td class="colorblack classalign"> 1 </td>
          </tr>
          <tr>
            <td class="colorblack classalign">Cartouche
thermostatique invers&eacute;e </td>
            <td class="colorblack classalign"> 85 </td>
            <td class="colorblack classalign"> 1 </td>
          </tr>
          <tr>
            <td class="colorblack classalign">Vanne
de remplissage </td>
            <td class="colorblack classalign">561F </td>
            <td class="colorblack classalign">1</td>
          </tr>
          <tr>
            <td class="colorblack classalign">Bobine
de vanne de remplissage </td>
            <td class="colorblack classalign">6693 </td>
            <td class="colorblack classalign"> 1 </td>
          </tr>
          <tr>
            <td class="colorblack classalign">Poign&eacute;e
de vanne de remplissage </td>
            <td class="colorblack classalign">1270 </td>
            <td class="colorblack classalign"> 1 </td>
          </tr>
          <tr>
            <td class="colorblack classalign">Vis
de poign&eacute;e de vanne de
remplissage </td>
            <td class="colorblack classalign">1104F </td>
            <td class="colorblack classalign"> 1 </td>
          </tr>
          <tr>
            <td class="colorblack classalign">Kit
Venturi </td>
            <td class="colorblack classalign">1437545 </td>
            <td class="colorblack classalign"> 1 </td>
          </tr>
          <tr>
            <td class="colorblack classalign">Flacon
de d&eacute;sinfection 1 Litre </td>
            <td class="colorblack classalign">1148F </td>
            <td class="colorblack classalign"> 1 </td>
          </tr>
        </tbody>
      </table>
      </td>
    </tr>
  </tbody>
</table>
</div>
</body>
</html>

**Bovino** · 29/03/2013, 20h32

Ton code HTML est une horreur...

Code :

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

1
2
3
4
<meta charset="utf-8">
...
<meta http-equiv="content-type"
 content="text/html; charset=utf-8">

Code :

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

1
2
3
4
      <table style="border-collapse: collapse;"
 class="matable center couleurfond couleurbord padded-table">
        <tbody>
        </tbody><thead>

Si tu mets un <tbody> vide en début de ta table, faut pas t'attendre à un affichage correct...

**laurentSc** · 29/03/2013, 22h28

Je crois avoir tout résolu : non seulement en prenant en compte tes remarques, mais aussi en me disant que ce n'est pas que si j'attribue une classe CSS à une table que ses éléments fils en héritent (<th>,<td>, etc.) donc je l'ai appliquée à chaque élément et j'obtiens ce que je cherche.

Et pour répondre à NoSmoking :

Envoyé par NoSmoking

Le soucis que tu vas rencontrer en utilisant display:none est que ta ligne risque de changer de hauteur si celle ci n'est pas clairement fixée.

l'image à laquelle j'applique parfois display:none est contenue dans une cellule de tableau, dont les dimensions sont imposées par le reste du tableau, donc pas de problème.

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
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
<!DOCTYPE html>
<html>
<head>
  <script type="text/javascript"> //-----------------------
function see_bubble_1(img_){
var Obj = document.getElementById('infobulle_1');
Obj.src = img_;
Obj.style.display = "block";
}
//--------------------
function kill_bubble_1(){
var Obj = document.getElementById('infobulle_1');
Obj.style.display = "none";
}
function see_bubble_2(img_){
var Obj = document.getElementById('infobulle_2');
Obj.src = img_;
Obj.style.display = "block";
}
//--------------------
function kill_bubble_2(){
var Obj = document.getElementById('infobulle_2');
Obj.style.display = "none";
}
  </script>
  <meta http-equiv="content-type"
 content="text/html; charset=utf-8">
  <style> .colorwhite {
color:white;
}
.colorblack {
color:black;
}
.souligne {
text-decoration:underline;
}
.classcenter {text-align:center;}
th.matable.largeur250 {width:250px;}
table.matable.center {margin-left:auto; margin-right:auto;} body {text-align:center;}
table.matable {
border-style:solid;
width:100%;
border-color:#993366;
background-color:white;
padding:3px; }
th.matable.couleurfondtitre {
background-color: rgb(102, 0, 51);
}
td.matable {
border-style:solid;
text-align:center;
border-width:1px;
border-spacing: 0px;
border-collapse: collapse; }
table.padded-table td { padding:3px; }
.largeur100 {
width:100%;
}
  </style>
  <title>script</title>
</head>
<body>
<div>
<table class="largeur100">
  <tbody>
    <tr>
      <td>
      <table style="border-collapse: collapse;"
 class="matable center couleurfond couleurbord padded-table">
        <thead> <tr>
          <th colspan="4">
          <h4 class="souligne classcenter"> <b>des
pi&egrave;ces d&eacute;tach&eacute;es
Liste</b></h4>
          </th>
        </tr>
        <tr>
          <th class="matable colorwhite classalign couleurfondtitre">D&eacute;signation</th>
          <th class="matable colorwhite classalign couleurfondtitre"><b>R&eacute;f&eacute;rence
REVAL</b></th>
          <th class="matable colorwhite classalign couleurfondtitre"><b>Quantit&eacute;</b></th>
          <th
 class="matable colorwhite classalign couleurfondtitre largeur250"><b>Visuel</b></th>
        </tr>
        </thead> <tbody>
          <tr>
            <td class="matable colorblack classalign">Douchette
de toilette</td>
            <td class="matable colorblack classalign"> <a
 href="http://www.groupe-reval-sav.com/Photopiece/test.jpg"
 onmouseover="see_bubble_1('http://www.groupe-reval-sav.com/Photopiece/test.jpg');"
 onmouseout="kill_bubble_1();">42OF</a></td>
            <td class="matable colorblack classalign">1</td>
            <td rowspan="13"
 class="matable colorblack classalign">
            <img id="infobulle_1"
 src="http://zupimages.net/up/2/1656267263.png"></td>
          </tr>
          <tr>
            <td class="matable colorblack classalign">Douchette
de d&eacute;sinfection</td>
            <td class="matable colorblack classalign"><a
 href="http://www.groupe-reval-sav.com/Photopiece/test.jpg"
 onmouseover="see_bubble_1('http://www.groupe-reval-sav.com/Photopiece/test.jpg');"
 onmouseout="kill_bubble_1();">42OF</a></td>
            <td class="matable colorblack classalign">1</td>
          </tr>
          <tr>
            <td class="matable colorblack classalign">Etiquette
"D&eacute;sinfection"&nbsp;</td>
            <td class="matable colorblack classalign"><a
 href="http://www.groupe-reval-sav.com/Photopiece/test.jpg"
 onmouseover="see_bubble_1('http://www.groupe-reval-sav.com/Photopiece/test.jpg');"
 onmouseout="kill_bubble_1();">42OF</a></td>
            <td class="matable colorblack classalign">1</td>
          </tr>
          <tr>
            <td class="matable colorblack classalign">Pince
support de douchette</td>
            <td class="matable colorblack classalign">1142F
            </td>
            <td class="matable colorblack classalign"> 2 </td>
          </tr>
          <tr>
            <td class="matable colorblack classalign">Vanne
d'arr&ecirc;t&nbsp; </td>
            <td class="matable colorblack classalign">535F
            </td>
            <td class="matable colorblack classalign"> 2 </td>
          </tr>
          <tr>
            <td class="matable colorblack classalign">Cartouche
thermostatique </td>
            <td class="matable colorblack classalign">4636F
            </td>
            <td class="matable colorblack classalign"> 1 </td>
          </tr>
          <tr>
            <td class="matable colorblack classalign">Cartouche
thermostatique invers&eacute;e </td>
            <td class="matable colorblack classalign"> 85 </td>
            <td class="matable colorblack classalign"> 1 </td>
          </tr>
          <tr>
            <td class="matable colorblack classalign">Vanne
de remplissage </td>
            <td class="matable colorblack classalign">561F
            </td>
            <td class="matable colorblack classalign">1</td>
          </tr>
          <tr>
            <td class="matable colorblack classalign">Bobine
de vanne de remplissage </td>
            <td class="matable colorblack classalign">6693
            </td>
            <td class="matable colorblack classalign"> 1 </td>
          </tr>
          <tr>
            <td class="matable colorblack classalign">Poign&eacute;e
de vanne de remplissage </td>
            <td class="matable colorblack classalign">1270
            </td>
            <td class="matable colorblack classalign"> 1 </td>
          </tr>
          <tr>
            <td class="matable colorblack classalign">Vis
de poign&eacute;e de vanne de
remplissage </td>
            <td class="matable colorblack classalign">1104F
            </td>
            <td class="matable colorblack classalign"> 1 </td>
          </tr>
          <tr>
            <td class="matable colorblack classalign">Kit
Venturi </td>
            <td class="matable colorblack classalign">1437545
            </td>
            <td class="matable colorblack classalign"> 1 </td>
          </tr>
          <tr>
            <td class="matable colorblack classalign">Flacon
de d&eacute;sinfection 1 Litre </td>
            <td class="matable colorblack classalign">1148F
            </td>
            <td class="matable colorblack classalign"> 1 </td>
          </tr>
        </tbody>
      </table>
      </td>
    </tr>
  </tbody>
</table>
<table width="100%">
  <tbody>
    <tr>
      <td align="center">
      <h4 class="souligne" align="center"> <b>Liste
des pi&egrave;ces d&eacute;tach&eacute;es</b></h4>
      <table style="border-collapse: collapse;" align="center"
 bgcolor="#ffffff" border="1" bordercolor="#993366"
 cellpadding="3" cellspacing="0">
        <tbody>
          <tr>
            <td class="colorwhite" bgcolor="#660033"><b>D&eacute;signation<br>
            </b></td>
            <td class="colorwhite" bgcolor="#660033"><b>R&eacute;f&eacute;rence
REVAL</b></td>
            <td class="colorwhite" bgcolor="#660033"><b>Quantit&eacute;</b></td>
            <td class="colorwhite" bgcolor="#660033"
 width="250"><b>Visuel</b></td>
          </tr>
          <tr>
            <td class="matable colorblack classalign">Douchette
de toilette</td>
            <td class="matable colorblack classalign"> <a
 href="http://www.groupe-reval-sav.com/Photopiece/test.jpg"
 onmouseover="see_bubble_2('http://www.groupe-reval-sav.com/Photopiece/test.jpg');"
 onmouseout="kill_bubble_2();">42OF</a></td>
            <td class="matable colorblack classalign">1</td>
            <td rowspan="13"
 class="matable colorblack classalign"><img
 id="infobulle_2" src="http://zupimages.net/up/2/1656267263.png"></td>
          </tr>
          <tr>
            <td class="matable colorblack classalign">Douchette
de d&eacute;sinfection</td>
            <td class="matable colorblack classalign"><a
 href="http://www.groupe-reval-sav.com/Photopiece/test.jpg"
 onmouseover="see_bubble_2('http://www.groupe-reval-sav.com/Photopiece/test.jpg');"
 onmouseout="kill_bubble_2();">42OF</a></td>
            <td class="matable colorblack classalign">1</td>
          </tr>
          <tr>
            <td class="matable colorblack classalign">Etiquette
"D&eacute;sinfection"&nbsp;</td>
            <td class="matable colorblack classalign"><a
 href="http://www.groupe-reval-sav.com/Photopiece/test.jpg"
 onmouseover="see_bubble_2('http://www.groupe-reval-sav.com/Photopiece/test.jpg');"
 onmouseout="kill_bubble_2();">42OF</a></td>
            <td class="matable colorblack classalign">1</td>
          </tr>
          <tr>
            <td class="matable colorblack classalign">Pince
support de douchette</td>
            <td class="matable colorblack classalign">1142F
            </td>
            <td class="matable colorblack classalign"> 2 </td>
          </tr>
          <tr>
            <td class="matable colorblack classalign">Vanne
d'arr&ecirc;t&nbsp; </td>
            <td class="matable colorblack classalign">535F
            </td>
            <td class="matable colorblack classalign"> 2 </td>
          </tr>
          <tr>
            <td class="matable colorblack classalign">Cartouche
thermostatique </td>
            <td class="matable colorblack classalign">4636F
            </td>
            <td class="matable colorblack classalign"> 1 </td>
          </tr>
          <tr>
            <td class="matable colorblack classalign">Cartouche
thermostatique invers&eacute;e </td>
            <td class="matable colorblack classalign"> 85 </td>
            <td class="matable colorblack classalign"> 1 </td>
          </tr>
          <tr>
            <td class="matable colorblack classalign">Vanne
de remplissage </td>
            <td class="matable colorblack classalign">561F
            </td>
            <td class="matable colorblack classalign">1</td>
          </tr>
          <tr>
            <td class="matable colorblack classalign">Bobine
de vanne de remplissage </td>
            <td class="matable colorblack classalign">6693
            </td>
            <td class="matable colorblack classalign"> 1 </td>
          </tr>
          <tr>
            <td class="matable colorblack classalign">Poign&eacute;e
de vanne de remplissage </td>
            <td class="matable colorblack classalign">1270
            </td>
            <td class="matable colorblack classalign"> 1 </td>
          </tr>
          <tr>
            <td class="matable colorblack classalign">Vis
de poign&eacute;e de vanne de
remplissage </td>
            <td class="matable colorblack classalign">1104F
            </td>
            <td class="matable colorblack classalign"> 1 </td>
          </tr>
          <tr>
            <td class="matable colorblack classalign">Kit
Venturi </td>
            <td class="matable colorblack classalign">1437545
            </td>
            <td class="matable colorblack classalign"> 1 </td>
          </tr>
          <tr>
            <td class="matable colorblack classalign">Flacon
de d&eacute;sinfection 1 Litre </td>
            <td class="matable colorblack classalign">1148F
            </td>
            <td class="matable colorblack classalign"> 1 </td>
          </tr>
        </tbody>
      </table>
      </td>
    </tr>
  </tbody>
</table>
</div>
</body>
</html>

**Bovino** · 29/03/2013, 22h32

l'image à laquelle j'applique parfois display:none est contenue dans une cellule de tableau

C'est un des cas où il est préférable d'utiliser la propriété visibility !

**laurentSc** · 29/03/2013, 22h51

Je viens de remplacer l'emploi de display par celui de visibility mais l'image n'apparaît plus sur onmouseover...

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
17
18
19
20
21
22
  <script type="text/javascript"> //-----------------------
function see_bubble_1(img_){
var Obj = document.getElementById('infobulle_1');
Obj.src = img_;
Obj.style.visibility = visible";
}
//--------------------
function kill_bubble_1(){
var Obj = document.getElementById('infobulle_1');
Obj.style.visibility = "hidden";
}
function see_bubble_2(img_){
var Obj = document.getElementById('infobulle_2');
Obj.src = img_;
Obj.style.visibility = "visible";
}
//--------------------
function kill_bubble_2(){
var Obj = document.getElementById('infobulle_2');
Obj.style.visibility = "hidden";
}
  </script>

et pourquoi c'est mieux ici ?