Как изменить размер шрифта в ячейках таблицы в соответствии с содержимым ячеек?

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

Я написал одну функцию, чтобы помочь вам настроить шрифт в зависимости от контейнера.

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

Изменить высоту в соответствии с вашими потребностями Я установил ее o 36.

И вам нужно пройтиваш элемент td:

adjustFont($(yourTdElementHere));

Если вы хотите, вы можете перебрать таблицу и передать каждый элемент.

Answer 4

вот что я делаю в моем dropdownReplacement плагине :

используя функцию 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];
  }

это должно помочь вам