Html Table - максимизировать размер шрифта в ячейках - PullRequest
Новая
       1

Html Table - максимизировать размер шрифта в ячейках

3 голосов
/ 10 февраля 2012

Буду признателен за помощь или предложения по моему текущему проекту.

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

Мне нужна таблица, чтобы максимизировать размер текста в ячейках таблицы.Размер CELL таблиц должен быть четным, но текст в ячейке должен быть максимально большим.

Я пробовал jQuery BigText и jTextFill , но они обакажется, зависит от фиксированной ширины / высоты.Поскольку каждый запрос к базе данных возвращает различное количество строк / столбцов, я не могу установить фиксированную ширину / высоту, поскольку это не увеличило бы экран с маленьким результатом таблицы.

Ответы [ 2 ]

0 голосов
/ 11 февраля 2012

Только что закончил.Он использует jQuery в основном для удобства / совместимости.Превращает вашу таблицу HTML в таблицу шрифтов с расширяющейся шириной.

http://jsfiddle.net/fnbrb/1/

Вот это после некоторой дополнительной игры.Может быть, это работает лучше: http://jsfiddle.net/xXHLc/11/

Вот JS, но также требуется несколько стилей: 

    jQuery("#expandable-font-table TD").each(function()
    {
        // need to set up the DIVs and TDs first
        var jTd = jQuery(this);
        var jDiv = jTd.find("DIV");
        jDiv.width(jTd.width()+"px"); //set the DIV's width to it's parent TD
        jTd.width(jTd.width()+"px"); //set the width of the TD so the table doesn't get confused
    });

    jQuery("#expandable-font-table TD DIV").each(function()
    {
        // get each DIV in the table and maximize it's font size
        var jDiv = jQuery(this);
        this.style.visibility="hidden"; // hide while resizing
        var fontSize = jDiv.css("font-size"); // current default font size
        fontSize = fontSize.substring(0,fontSize.length-2);
        // loop while DIV is still within it's original width
        while(this.scrollWidth <= this.clientWidth)
        {
            fontSize++;
            this.style.fontSize = fontSize+"px";
        }
        this.style.fontSize = (fontSize-1)+"px";
        this.style.visibility="visible";        
    });
0 голосов
/ 10 февраля 2012

Я не думаю, что в HTML / Javascript есть какие-либо метрики шрифта. В некоторых библиотеках пользовательского интерфейса вы можете использовать их для измерения строки с разными размерами шрифта перед ее рендерингом. Без этого вы могли бы прибегнуть к чему-то вроде приведенного ниже кода, но это своего рода хак. Может быть, кто-то узнает лучший способ.

Этот тест кода отображает строки, чтобы посмотреть их offsetWidth, а затем снова отображает их, увеличивая размер шрифта до тех пор, пока они не станут примерно той же ширины, что и самая большая строка. 

<!DOCTYPE html>
<html>
<head>
  <script>
function init() {
    var exampleData = [
       ["one", "this is longest cell", "apple"],
       ["banana", "peach", "kiwi"],
       ["AB", "yabba", "foo bar baz"]
                       ];
    var ncols = 3;
    var tab = document.getElementById('tab');
    var testArea = document.getElementById('testArea');

    // First, loop through the cells and find the biggest one
    var maxWidth = 0;
    for (var i=0; i<exampleData.length; i++) {
        var rowData = exampleData[i];
        for (var j=0; j<ncols; j++) {
            var span = document.createElement('span');
            span.innerHTML = rowData[j];
            testArea.appendChild(span);
            if (maxWidth < span.offsetWidth)
                maxWidth = span.offsetWidth;
            testArea.removeChild(span);
        }
    }
    // now, add them to the table, bumping the font so the span is as 
    // wide as maxWidth
    for (var i=0; i<exampleData.length; i++) {
        var rowData = exampleData[i];
        var row = document.createElement('tr');
        for (var j=0; j<ncols; j++) {
            var span = document.createElement('span');
            span.innerHTML = rowData[j];
            testArea.appendChild(span);
            /* Adjust style to get close to max size: */
            var fs = 10;
            span.style.fontSize = fs + "px";
            while (span.offsetWidth < maxWidth) {
                fs += 1;
                span.style.fontSize = fs + "px"; 
            }
            // console.log(span.style.fontSize + " -> " + span.offsetWidth);            
            var td = document.createElement('td');
            row.appendChild(td);
            td.appendChild(span);
        }
        tab.appendChild(row);       
    }


}    
  </script>
</head>
<body onload='init()'>
<table id='tab'>
</table>
<div id='testArea' style='visibility:hidden'>
</div>
</body>
</html>
...