Question

我很感激我当前项目的一些帮助或建议。

我有一个带有html表单的简单网页，其中查询数据库，结果将各种行和列返回到表中。

我需要表格做的是最大化表格单元格中文本的大小。表CELL大小应该是偶数，但单元格中的文本应尽可能大。

我尝试了jQuery BigText和jTextFill，但它们似乎都依赖于固定的宽度/高度。由于每个数据库查询返回不同数量的行/列，我无法设置固定的宽度/高度，因为它不会使用小表结果最大化屏幕。

Answer 1

我认为HTML / Javascript中没有任何字体度量函数。在某些UI库中，您可以使用它们在渲染之前测量不同字体大小的字符串。没有它，你可以使用类似下面的代码，但它有点像黑客。也许有人会知道更好的方式。

此代码测试呈现字符串，查看其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>

Answer 2

刚刚完成了这个。它主要是为了方便/兼容而使用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";        
    });

Html表 - 最大化单元格中的字体大小

2 个答案: