Diviser les colonnes d'un tableau html de manière proportionnelle au contenu [Résolu]

Messages postés
34
Date d'inscription
samedi 31 juillet 2010
Statut
Membre
Dernière intervention
26 mars 2013
- - Dernière réponse : cs_jimmyhendrix
Messages postés
34
Date d'inscription
samedi 31 juillet 2010
Statut
Membre
Dernière intervention
26 mars 2013
- 20 nov. 2012 à 03:47
J'ai un petit problème !

J'aimerais diviser un tableau de 935px de large (width="935" cellpadding="0" cellspacing="0" border="0") en 5 colonnes. En gros, je fais une liste de catégories. Le problème, c'est que certaines catégories sont plus longues que d'autres (ex.: Sports vs Cuisiner/recettes).

Concrètement, je saurais comment le faire en javascript de manière compliquée en exécutant un code qui calcule le offsetWidth de chacune des 5 colonnes (en considérant qu'aucun width n'est spécifié pour le tableau). J'additionne tout pour avoir la largeur du tableau ; je fais la différence entre 935 et la dite largeur ; je divise le résultat en 5 et je l'attribue à chacune des colonnes en tant que style CSS "padding-right".

Bref, est-ce qu'il y aurait un moyen plus simple qui m'échappe ?
Afficher la suite 

3 réponses

Meilleure réponse
Messages postés
34
Date d'inscription
samedi 31 juillet 2010
Statut
Membre
Dernière intervention
26 mars 2013
3
Merci
J'ai essayé width: 20%, les colonnes sont tous égales et non-proportionnelles à la longueur du texte à l'intérieur...

J'ai tout-de-fois programmé ce que j'avais en tête en javascript et ça fonctionne à merveille ! Je vais le publier pour ceux qui seraient intéressés :

var tdcat1 = parseFloat(document.getElementById("tdcat1").offsetWidth);
var tdcat2 = parseFloat(document.getElementById("tdcat2").offsetWidth);
var tdcat3 = parseFloat(document.getElementById("tdcat3").offsetWidth);
var tdcat4 = parseFloat(document.getElementById("tdcat4").offsetWidth);
var tdcat5 = parseFloat(document.getElementById("tdcat5").offsetWidth);

var tdtotal = tdcat1 + tdcat2 + tdcat3 + tdcat4 + tdcat5;
var padcalcul = (935 - tdtotal) / 4;
var padright = Math.ceil(padcalcul);    //arrondi à l'entier supérieur

document.getElementById("tdcat1").style.paddingRight = padright + "px";
document.getElementById("tdcat2").style.paddingRight = padright + "px";
document.getElementById("tdcat3").style.paddingRight = padright + "px";
document.getElementById("tdcat4").style.paddingRight = padright + "px";


Important :
- Mettre un "id" à chaque "td" de la première rangée (ex:<td id="tdcat1">)
- N'attribuer aucun "width" ni au tableau, ni aux colonnes
- Mettre le code javascript à la toute fin du (ou du moins, après le code html du tableau)
- Modifier la largeur du tableau (935) ou le nombre de colonnes à votre guise

Dire « Merci » 3

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

Codes Sources 202 internautes nous ont dit merci ce mois-ci

Commenter la réponse de cs_jimmyhendrix
Messages postés
130
Date d'inscription
lundi 11 janvier 2010
Statut
Membre
Dernière intervention
7 juin 2013
0
Merci
Tu peux aujouter un max-width ou un width de 20% à chaque colonne.
Ou mettre les colonnes un peu larges sur plusieurs ligne :
$message = wordWrap($message,111,"\n",1);

111 : le nombre de caractères avant coupure de la ligne...
"\n" : le saut de ligne...
1 : la coupure du mot en bout de ligne...sinon 0.

ou

<style>.mess {width: 20%;}</style>

<td class="mess"><?php echo $message; ?></td>
Commenter la réponse de sylvain64520
Messages postés
34
Date d'inscription
samedi 31 juillet 2010
Statut
Membre
Dernière intervention
26 mars 2013
0
Merci
MISE À JOUR !

Petite modification pour que ça fonctionne vraiment dans tous les cas :

var tdcat1 = parseFloat(document.getElementById("tdcat1").offsetWidth);
var tdcat2 = parseFloat(document.getElementById("tdcat2").offsetWidth);
var tdcat3 = parseFloat(document.getElementById("tdcat3").offsetWidth);
var tdcat4 = parseFloat(document.getElementById("tdcat4").offsetWidth);
var tdcat5 = parseFloat(document.getElementById("tdcat5").offsetWidth);

var tdtotal = tdcat1 + tdcat2 + tdcat3 + tdcat4 + tdcat5;
var padcalcul = (935 - tdtotal) / 4;
var padright = Math.ceil(padcalcul);     //arrondi à l'entier supérieur

document.getElementById("tdcat1").setAttribute("width",tdcat1+padright);
document.getElementById("tdcat2").setAttribute("width",tdcat2+padright);
document.getElementById("tdcat3").setAttribute("width",tdcat3+padright);
document.getElementById("tdcat4").setAttribute("width",tdcat4+padright);
Commenter la réponse de cs_jimmyhendrix