如何根据单元格内容更改表格单元格中的字体大小？

我有一个HTML表格，它的单元格从0开始递增（从左到右，直到底部）。如何根据单元格内容更改表格单元格中的字体大小？

我在CSS中固定了width和height（在我的情况下，宽度为40px，高度为25px）。

当表格变大时，里面的数字也变大（例如，最后一个数字是1266356）。这会导致单元格比我在CSS中定义的更宽，从而相应地扩展整个表格。

取而代之，我希望数字的字体更小以保持单元格40px的宽度。

我该如何使用CSS/Javascript/jQuery来实现这个功能？

2010-04-22 Misha Moroshko

有可能是一个聪明的CSS的方式来做到这一点，但在jQuery的像下面可以做的伎俩：

// 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"); 
}

来源

2010-04-22 13:39:35 karim79

感谢您的想法，但它的主要问题是，我必须自己计算每个文本长度的字体大小。我正在寻找一个自动化解决方案... – 2010-04-22 14:59:18

我认为这是要走的路，因为没有现成的机制来解决您的问题。但是，您可以扩展此解决方案。您可以使用默认大小作为起点，而不是设置预设大小，从而减小字体大小，直到单元格的宽度小于设置的阈值（您的情况为40px）。 – 2010-04-22 16:55:14

你可以遍历表中的行和单元格，检查的长度innerHTML之中。它可能是这个样子：

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"; 
     } 
    } 
}

来源

2010-04-22 16:42:49 Sorig

这是我在做我的dropdownReplacement plugin：使用detectCharWidth功能我找出文本的平均字符宽度的DIV

，然后我可以乘这个文本的长度以查看它是否适合输入。

在这一点上，你可以将字体更改为我的小

这里是功能：

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]; 
    }

，应该让你一些方式

来源

2010-04-22 16:51:42 mkoryak

爱你的域名;-) – 2010-04-22 16:56:52

它是我做的..有时=） – mkoryak 2010-04-22 21:41:39

我写了一个函数来帮助你根据容器调整字体。

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

改变高度，以您的需求，我固定它Ø36

而且你必须通过你的TD元素：

adjustFont($(yourTdElementHere));

如果你愿意，你可以通过你的表圈和传递每个元素。

来源

2018-02-18 19:08:16

如何根据单元格内容更改表格单元格中的字体大小？

回答

相关问题