11548 sujets

JavaScript, DOM et API Web HTML5

[Résolu]Firefox - largeur d'une colonne change quand on masque un tab

Bonjour,

J'ai besoin d'une fonctionnalité me permettant de masquer un tableau en cliquant sur un lien.

J'ai développé un script qui fonctionne, mais qui a un problème sous firefox.
En effet, la largeur de la première colonne change lorsqu'on masque le tableau.

Voici le code :


<html>
	<head>
		<script>
			function steackhachee(div)
			{
				if (document.getElementById(div).style.display == "block")
				{
					document.getElementById(div).style.display = "none";
				}
				else
				{
					document.getElementById(div).style.display = "block";
				}
			}
		</script>
	</head>
	<body>
	<a href="javascript:steackhachee('test');">test</a><br /><br />

	<table width="100%" border="1" id="test"><tr>
		<td width="40%">
			col1
		</td>
		<td>
			col2
		</td>
	</tr>
</table>

	</body>
</html>


Dans cet exemple, la colonne qui contient le texte "col1" change de taille lorsqu'on clique sur le lien "test".

Je constate qu'en attribuant des valeurs en pixel aux largeurs du tableau, et non en pourcentage, ça fonctionne.
Malheureusement, j'ai besoin de garder les valeurs en pourcentage.

Auriez-vous une explication de ce qu'il se passe, et éventuellement une solution ?

Merci d'avance.
Modifié par donnie (18 Apr 2007 - 11:22)
J'ai résolu mon problème en encapsulant mon tableau dans un <div> et en affichant/masquant le div.

Je trouve ce comportement bizarre de la part de Firefox, si quelqu'un a une explication "logique" sur le pourquoi du comment, ça m'intéresse.
Salut,

C'est un problème assez courant : la valeur de display pour un tableau doit être "table" et non "block". Je pense que ça peut cependant poser des problèmes avec IE.

Pour régler ça, tu peux écrire :
document.getElementById(div).style.display = "";
pour afficher le tableau. Ca devrait remettre la propriété display à sa valeur par défaut. Tu peux aussi passer par une classe "hidden" (par exemple), ajouter le code suivant dans ta CSS :
.hidden {display: none;}
et manipuler dans ton code JS la classe plutôt que directement les styles. C'est d'ailleurs en général une meilleure idée, surtout quand la quantité de styles à modifier augmente.
Ca fonctionne bien quand je change les "block" par une valeur vide (ce qui revient à remettre la valeur par défaut donc).

Voilà donc le code qui marche :

function steackhachee(div)
{
    if (document.getElementById(div).style.display == "")
    {
        document.getElementById(div).style.display = "none";
    }
    else
    {
        document.getElementById(div).style.display = "";
    }
}


Et ok pour manipuler les classes plutôt que les styles.

Merci !
donnie a écrit :
Je trouve ce comportement bizarre de la part de Firefox

Oui, c'est souvent bizarre les standards quand c'est implémenté correctement... on n'a pas trop l'habitude, alors ça surprend. Smiley lol

Vu les probables limites d'IE pour comprendre display: table (même appliqué à un tableau...), passer par une div contenant le tableau à masquer est sans doute le plus raisonnable.
Sujet clos
Aller à