Diviser les colonnes d'un tableau html de manière proportionnelle au contenuRésolu

Question

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 ?

sylvain64520 · Answer

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," ",1); 111 : le nombre de caractères avant coupure de la ligne... " " : le saut de ligne... 1 : la coupure du mot en bout de ligne...sinon 0. ou

cs_jimmyhendrix · Answer

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

cs_jimmyhendrix · Answer

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);

Diviser les colonnes d'un tableau html de manière proportionnelle au contenu

3 réponses

Votre réponse

Discussions similaires