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
- 14 nov. 2012 à 05:05 - Dernière réponse :
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
15 nov. 2012 à 22:22
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

Merci cs_jimmyhendrix 3

Avec quelques mots c'est encore mieux Ajouter un commentaire

Codes Sources a aidé 93 internautes 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
14 nov. 2012 à 09:17
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
20 nov. 2012 à 03:47
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.