rowspan sous Firefox et Chrome

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

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, 20h11

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, 21h04

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, 21h17

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, 22h11

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

**laurentSc** · 25/03/2013, 23h49

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é ?

rowspan sous Firefox et Chrome

HTML

Vue hybride

Discussions similaires

Partager

Partager