colspan ne fonctionne pas dans une table avec display

bonjour
je galère pour cette connerie pas moyen d'afficher le colspan en 4, il m'affiche en 1 quand je fait appelle à la fonction mode_paie.
si je met un div avant le tr avec un display:none;... ça ne fonctionne pas, il affiche la partie qui doit être cache et le colspan="4" fonctionne.
comment faire car j'ai plein de partie comme ça à ajouter dans la table ?

Code:

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
<tr>
<td class="modepaie" colspan="3" >
<?php
$vermod = $bdd->query("SELECT id FROM mode_paiemen WHERE choixpaie != 'boutique'");
        if ($verif_mod = $vermod->fetch()){
  ?>
  Vous allez payer en: 
  <select id="selectmod" name="modepaie" onchange="mode_paie();">
   <option value="boutique">Boutique</option>
   <option value="ligne">Ligne (internet)</option>
   </select>
<?php
   } 
   ?>
   </td>
   <td colspan="2" ></td>
 </tr>
 
 <tr id="visumodepaie" style="display:none;">
 <td class="modepaie" colspan="4" >
 Choix de votre mode de paiement: 
  <select id="choixpaie" name="choixpaie"> 
<?php
 $vermod = $bdd->query("SELECT mode FROM mode_paiemen WHERE choixpaie != 'boutique'");
        if ($elements = $vermod->fetchall()){  
foreach($elements as $element){
        $modepaie = $element['mode'];
?>
	<option value="<?php echo $modepaie; ?>"><?php echo ucfirst($modepaie); ?></option>
<?php
        }}
?>
    </select>
	</td>
	 <td colspan="1" ></td>
	 </tr>

Code:

1
2
3
4
5
6
7
8
9
function mode_paie(){
select = document.getElementById("selectmod");
choice = select.selectedIndex;
valeur = select.options[choice].value;
 
if (valeur == 'ligne'){
document.getElementById('visumodepaie').style.display='block';	
} else {document.getElementById('visumodepaie').style.display='none'; }
}

[EDIT] résolu en faisant ça

Code:

1
2
3
4
5
6
7
if (valeur == 'ligne'){
    document.getElementById('visumodepaie').style.position = 'relative';
    document.getElementById('visumodepaie').style.visibility = 'visible';
} else {
 document.getElementById('visumodepaie').style.position = 'absolute';
    document.getElementById('visumodepaie').style.visibility = 'hidden';
	}

solution ici https://www.developpez.net/forums/d1...-display-none/