Attribut colspan ne fonctionne pas avec display:none

Version imprimable

Bonjour,

J'essaye d'afficher ou de masquer une ligne de tableau avec un colspan de 9 mais lorsque jl'affiche ou masque la ligne, le colspan de 9 n'est pas pris en compte, cela affiche le texte dans 1 colonne seulement, voici le code:
Code:

1 2 <a href="#" onclick="cl(<%=z%>);">clore</a>
Code:

1 2 3 4 5 6 7 8 9 <script language="javascript"> function cl(z){ if(document.getElementById(z).style.display == 'none') { document.getElementById(z).style.display = 'block'; } else { document.getElementById(z).style.display = 'none'; } } </script>
Code:

1 2 3 <tr id="<%=z%>" style="display:none"> <td colspan="9">Texte à afficher avec un colspan de 9</td> </tr>
PS. si j'enlève: style="display:none", comme ceci:<tr id="<%=z%>">, le colspan est pris en compte, mais j'ai besoin du code complet pour masquer la ligne au départ...

merci d'avance pour les réponses!

12/02/2016, 10h17
SylvainPV

Je déplace en section CSS vu que le problème ne semble pas lié à JS.
Merci de poster le code du tableau HTML complet obtenu côté client, sans code serveur. Idéalement poster la page complète sur codepen ou jsbin, pour voir si une autre règle CSS ne vient pas surcharger là où il ne faut pas.

Bonjour,

en effet, tel quel, le td ne reprend pas toute la largeur : le colspan ne fonctionne plus, car le td est sorti du flux.

Donc j'ai cherché, et trouvé, un astuce :

Code:

1
2
3
4
5
6
7
8
9
function cl(z){						
  if(document.getElementById(z).style.visibility == 'hidden') {
    document.getElementById(z).style.position = 'relative';
    document.getElementById(z).style.visibility = 'visible';
  } else {
    document.getElementById(z).style.position = 'absolute';
    document.getElementById(z).style.visibility = 'hidden';
  }
}

Code:

1
2
3
<tr id="<%=z%>" style="visibility:hidden;position:absolute;">
    <td colspan="9">Texte à afficher avec un colspan de 9</td>
</tr>