Bonjour,

Sur un site je dois faire un tableau avec des cellules carrées, je ne connais pas le nombre de ligne et de colonnes à l'avance, ça dépend d'un enregistrement dans ma base de données. Bref, ce point ne m'a pas posé de problème.

Cependant, je n'arrive pas à avoir des cellules carrées, ce qui ne m'a pourtant pas l'air si compliqué !

J'ai voulu utiliser du javascript pour définir une hauteur égale à la largeur :

var larg = $("td:first").width();
$("td").css("height", larg + "px");

Je précise que mon tableau a une largeur de 100% définie dans un fichier css externe :

#testTable {
	table-layout: fixed;
	width : 100%;
	text-align : center;
	border : 3px solid black;
}

.testTd{
	border : thin solid black;
}

Le problème est que la hauteur de mes cellules est 4 pixels plus petite que la largeur (je l'ai vérifié via des console.log dans mon javascript).

4 pixels c'est peu, mais mon site sera affiché sur un écran beaucoup plus grand à la fin et je voudrais que ça soit vraiment carré.

Edit : j'ai essayé de définir moi même une valeur pour height et j'ai toujours cette différence de 4 pixels.

Edit 2 : J'ai (un peu) trouvé la source de mon problème : les marges et padding.

J'ai rajouté padding : 0 sur mes td ce qui a réduit la différence de taille.

Par contre les marges je dois les laisser je n'ai pas le choix :/

Bref, la différence est très minime maintenant mais je suis curieux de savoir comment faire pour que ma hauteur prenne la bonne valeur.

Si vous avez des idées ou des conseils je suis preneur.

Merci

Edit (le dernier ) :

C'est bon !

Pour récupérer la largeur totale de ma case (avec marges et padding) je devais utiliser https://api.jquery.com/outerWidth/#outerWidth-includeMargin.

-
Edité par BenJ25 5 février 2020 à 9:47:11