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