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
Dernière intervention
26 mars 2013
- - Dernière réponse : cs_jimmyhendrix
Messages postés
34
Date d'inscription
samedi 31 juillet 2010
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 

Votre réponse

3 réponses

Meilleure réponse
Messages postés
34
Date d'inscription
samedi 31 juillet 2010
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 123 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
Dernière intervention
7 juin 2013
2
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
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

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.