Question

我有一个HTML表格，其单元格中从0开始递增数字（从左到右，从上到下）。

我在CSS中修复了单元格的width和height（在我的情况下，宽度为40像素，高度为25像素）。

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

相反，我希望数字的字体更小，以保持单元格的宽度为40px。

如何使用CSS / Javascript / jQuery实现此目的？

Answer 1

可能有一种聪明的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");
}

Answer 2

您可以循环遍历表格中的行和单元格，并检查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";
        }
    }
}

Answer 3

这是我在dropdownReplacement plugin中所做的事情：

使用detectCharWidth函数我计算出div中文本的avg char宽度，然后我可以将它乘以文本的长度，看它是否适合输入。

此时你可以将字体更改为我更小

这是功能：

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

应该可以帮助你

Answer 4

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

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

如果需要，您可以遍历表格并传递每个元素。

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

4 个答案: