How to change the font size in table cells according to cells content?

Question

I have an HTML table which has incrementing numbers starting from 0 in its cells (left to right, up to bottom).

I fixed in CSS the width and the height of the cells (40px width, 25px height, in my case).

When the table becomes larger, the numbers inside it becomes large also (for example, the last number is 1266356). This causes the cells to be wider than I defined in the CSS, which expands the whole table accordingly.

Instead, I would like the font of the numbers to be smaller to keep the width of the cell 40px.

How can I accomplish this using CSS / Javascript / jQuery ?

Answer 1

There's probably a clever CSS way to do this, but in jQuery something like the following could do the trick:

// 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

You could loop through the rows and cells in the table and check the length of the innerHTML. It might look something like this:

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

here is what i do in my dropdownReplacement plugin :

using detectCharWidth function i figure out the avg char width of the text in an div, then i can multiply this by the length of the text to see if it will fit in an input.

at this point you could change the font to me smaller

here is the function:

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

that should get you some of the way

Answer 4

I wrote one function to help you adjust a font depending on the container.

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

Change the height to your needs I fixed it o 36.

And you have to pass your td element :

adjustFont($(yourTdElementHere));

If you want, you can loop through your table and pass on each element.