Discussion :

[Castiel777]

Bonjour,

je cherche à fixer la taille width de mes colonnes de mon tableau généré dynamiquement pour que ces colonnes soit en phase avec ma ligne d'en-tête. Pas moyen de trouver comment faire vu que tout se génère tout seul, je ne sais pas comment caler un width dans mes colonnes :s

J'upload un screen pour mieux comprendre:

Je le génère comme ceci:

Code 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
if(TypeRech == "Fax" || TypeRech == "Mails")
{
	// $ligne = "<tr id='LigPartDroite_2' class='trDroite'>";
	// construit les lignes avec les données retour
	$.each(retourjson, function(titre, retour)
	{
		// toutes les colonnes que je ne souhaite pas afficher
		if(titre != "NI" && titre != "TypeInt" && titre != "Auth" && titre != "Envoi" && titre != "NDoc")
		{
			if(titre == "MtTotDoc")
			{
				retour = Arrondir(retour, 2);
				Total += +retour;
				retour += " €";
			}
			if(retour == "0 €") retour = "- €";
			$cell=$("<td />").html(retour);
			$ligne.append($cell);
		}
	});
	$("#tabDroite").append($ligne);
}

Comment puis-je fixe la taille de mes colonnes ?

Bonne journée !

[domi65]

je cherche à fixer la taille width de mes colonnes de mon tableau généré dynamiquement pour que ces colonnes soit en phase avec ma ligne d'en-tête.

Ma petite solution avec du javascript "pur" :

Mettons que la ligne d'entête soit un tableau (id = entete) d'une seule ligne et donnons comme id à la table tableau

Tu devrais obtenir ce que tu veux avec ce petit JS qui, à l'aide d'une petite boucle, applique à chaque cellule de l'entête la largeur de la cellule du tableau lui correspondant.
(noter que c'est réglé pour fonctionner avec des cellules dont les bordures sont de 1px et "collapsées" et dont la propriété box-sizing n'a pas été définie sur border-box)

Code Javascript :

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

1
2
3
4
5
6
7
var ot1 = document.getElementById('entete');
var ot2 = document.getElementById('tableau');
var olt = 0;
for(var i=0, max=ot1.rows[0].cells.length; i<max; i++) {
    ot1.rows[0].cells[i].style.width = (ot2.rows[0].cells[i].offsetWidth -1) + 'px'; // -1 pour la bordure
    olt += ot2.rows[0].cells[i].offsetWidth;
}

Ça marche ?

[psychadelic]

tu peux très bien indiquer des width différents pour chacune de tes colonnes, mais il faut que leur somme (+ bordures ) corresponde à celle de la largeur totale du tableau ( table.width )

La largeur totale du tableau est prioritaire et doit être indiquée
si les width des colonnes ne correspondent pas, alors le navigateur les ajustera à sa sauce pour tout faire rentrer, quitte même à ajuster aussi la largeur de la table.

[Castiel777]

Bonjour,

merci d'avoir pris le temps de répondre domi65, ta solution applique bien une taille sur mon en-tête, mais pas la même largeur que la cellule, voilà un screen:

merci aussi psychadelic, le problème est que si je donne une width à chaque colonne, ça va rajouter pas mal de ligne et aussi, si mon texte est plus grand que ma cellule à laquelle j'ai donné un width, elle va s'agrandir pour accueillir tout le texte (ce n'est pas moi qui gère le texte, c'est dynamique avec des données) et ne sera plus en phase avec l'en-tête.

Bonne journée !

[domi65]

Je ne comprends rien à ton screen.
La page est-elle en ligne quelque part que je puisse la voir et l'étudier ?

[psychadelic]

merci aussi psychadelic, le problème est que si je donne une width à chaque colonne, ça va rajouter pas mal de ligne et aussi, si mon texte est plus grand que ma cellule à laquelle j'ai donné un width, elle va s'agrandir pour accueillir tout le texte (ce n'est pas moi qui gère le texte, c'est dynamique avec des données) et ne sera plus en phase avec l'en-tête.

Ma réponse porte sur les principes, pas sur la technique de implémentation à utiliser

Ne me dis tout de même pas que tu cherche à programmer ton truc en te fichant des tenants et des aboutissants !

[Castiel777]

Bonjour,

j'ai finalement réussi à aligner mon tableau, voilà le résultat:

j'ai fait ça ap:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
complete : function() {
	numCol=0;
	$("#tabDroiteTitre th").each(function() {
		console.log($(this).css("width"));
		tailleCol=$(this).css("width");
		$("#tabDroite tr").each(function() {
			$(this).find("td:eq("+numCol+")").css("min-width",tailleCol);
			$(this).find("td:eq("+numCol+")").css("max-width",tailleCol);
		});
		numCol+=1;
	});
}

Bonne journée !