当前位置：文江博客话题详情

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

发布于 2025-01-04 15:30:57 字数 417 浏览 0 评论 0原文

我希望对我当前的项目有一些帮助或建议。

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

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

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

<代码>

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

酷炫老祖宗 2025-01-11 15:30:57

刚刚做完这个。它使用 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";        
    });

Just finished this. It uses jQuery mostly for convenience/compatibility. Turns your HTML table into an expanding width font table.

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

Here it is after some more fiddling. Maybe this works better:
http://jsfiddle.net/xXHLc/11/

Here is the JS but it requires a few styles as well:

    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 原文

伤痕我心 2025-01-11 15:30:57

我不认为 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>

I don't think there any font metrics functions in HTML/Javascript. In some UI libraries you can use them to measure a string at different font sizes before rendering it. Without that, you could resort to something like the code below, but it is kind of a hack. Maybe someone will know a better way.

This code test renders the strings, to look at their offsetWidth, and then renders them again, bumping their font sizes until they are about the same width as the largest string.

<!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>

回复收藏 0 原文

~没有更多了~