javascript - How to change the font size in table cells according to cells content? - Stack Overflow

admin管理员组

文章数量:1279124

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 bees larger, the numbers inside it bees 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 acplish this using CSS / Javascript / jQuery ?

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 bees larger, the numbers inside it bees 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 acplish this using CSS / Javascript / jQuery ?

• javascript
• jquery
• html
• css

Share Improve this question Follow asked Apr 22, 2010 at 13:34 Misha MoroshkoMisha Moroshko 171k229229 gold badges520520 silver badges760760 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 4

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

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

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

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.

本文标签： javascriptHow to change the font size in table cells according to cells contentStack Overflow