Comment changer la taille de la police dans les cellules du tableau en fonction du contenu des cellules?

Question

J'ai une table HTML qui a des numéros incrémentiels commençant à partir de 0 dans ses cellules (de gauche à droite, de bas en haut).

J'ai fixé en CSS le width et le height des cellules (largeur 40px, hauteur 25px, dans mon cas).

Lorsque la table devient plus grande, les nombres à l'intérieur deviennent également grands (par exemple, le dernier nombre est 1266356). Cela provoque les cellules à être plus large que je définis dans le CSS, qui étend la table entière en conséquence. Au lieu de cela, je voudrais que la police des nombres soit plus petite pour garder la largeur de la cellule 40px.

Comment puis-je accomplir cela en utilisant CSS/Javascript/jQuery?

Answer 1

Il y a probablement un moyen CSS intelligent pour le faire, mais dans jQuery quelque chose comme ce qui suit pourrait faire l'affaire:

// if the length exceeds a predefined limit 
if($('.someCell').text().length > 5) { 

    // change the font size of it's text 
    $('.someCell').css("font-size", "8px"); 
} 

Answer 2

Vous pouvez parcourir les rangées et les cellules de la table et vérifier la longueur de la innerHTML. Il pourrait ressembler à ceci:

var tableRows = document.getElementById("myTable").rows; 
maxLength = 5; 

for(var i = 0; i<rows.length;i++) 
{ 
    var rowCells = tableRows[i].cells.length; 
    for(var a = 0; a<rows.length;a++) 
    { 
     if(rowCells[a].innerHTML.length > maxLength) 
     { 
      rowCells[a].style.fontSize = "8px"; 
     } 
    } 
} 

Answer 3

voici ce que je fais dans mon dropdownReplacement plugin:

en utilisant la fonction detectCharWidth je figure sur la largeur char avg du texte dans une div, je peux multiplier par la longueur du texte pour voir s'il va tenir dans une entrée.

à ce stade, vous pouvez changer la police me plus petite

est la fonction ici:

var detectedCharWidths = {}; 
var detectCharWidth = function(testText){ 
    var val = testText || "a b c d e f 1 2 3 4 5 6 A B C D E F ! ! %"; //correct detection depends on this more then anything 
    if(!detectedCharWidths[val]){ 
    var $inp = $("<span>", { 
    "text":val, 
    // "class":opts.selectClass, 
    "css": {"background":"none", "margin":0, "padding":0, "overflow":"visible", "width":"auto", "color":"#FFF"} 
    }); 
    $body.append($inp); 
    detectedCharWidths[val] = ($inp.width()/val.length); 
    $inp.remove(); 
    } 
    return detectedCharWidths[val]; 
    } 

qui devrait vous faire un bout de chemin

Answer 4

j'ai écrit une fonction pour vous aider ajuster une police en fonction du conteneur.

function adjustFont(x) { 
     if (x.height() <= 36) 
      return x.css("font-size"); 
     else { 
      var sizeInPx = x.css("font-size").split("px")[0]; 
      x.css("font-size", (sizeInPx - 1) + "px"); 
      adjustFont(x); 
     } 
    } 

Modifier la hauteur à vos besoins je l'ai fixé o 36.

Et vous devez passer votre élément td:

adjustFont($(yourTdElementHere)); 

Si vous voulez, vous pouvez boucler à travers votre table et transmettre chaque élément.