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

У меня есть таблица HTML, которая имеет увеличивающиеся числа, начиная с 0 в своих ячейках (слева направо, вплоть до нижней).Как изменить размер шрифта в ячейках таблицы в соответствии с содержимым ячеек?

Я исправил в CSS width и height из ячеек (ширина 40px, высота 25px, в моем случае).

Когда таблица становится больше, номера внутри нее также становятся большими (например, последнее число - 1266356). Это заставляет ячейки быть более широкими, чем я определил в CSS, что соответственно расширяет всю таблицу.

Вместо этого я хотел бы, чтобы шрифт чисел был меньше, чтобы сохранить ширину ячейки 40px.

Как это сделать, используя CSS/Javascript/jQuery?

источник

2010-04-22 Misha Moroshko

Там, наверное, умный 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"); 
}

источник

2010-04-22 13:39:35 karim79

Спасибо за идею, но главная проблема заключается в том, что я должен самостоятельно рассчитать размер шрифта для каждой длины текста. Я ищу автоматическое решение ... –

Я думаю, что это путь, потому что нет существующего механизма для вас. Однако вы можете расширить это решение. Вместо того, чтобы устанавливать заданный размер, вы можете использовать размер по умолчанию в качестве начальной точки, уменьшая размер шрифта, пока ширина ячейки не будет меньше установленного порога (40 пикселей в вашем случае). –

Вы можете перебрать строки и ячейки в таблице и проверить длину из 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"; 
     } 
    } 
}

источник

2010-04-22 16:42:49 Sorig

вот что я делаю в моем dropdownReplacement plugin:

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

, что вы должны получить некоторые пути

источник

2010-04-22 16:51:42 mkoryak

Любите свое доменное имя ;-) –

его то, что я делаю .. иногда =) – mkoryak

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

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

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

источник

2018-02-18 19:08:16

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

ответ

Смежные вопросы