HTML表格比例适合

我有一个很多小图表的KPI仪表板。一种类型的图表实际上是一个HTML表格。它显示在DIV中。HTML表格比例适合

<div style="width:400px; height:250px;overflow:hidden"> 
    <table> 
     <tr><th>Col1</th><th>Col2</th></tr> 
     <tr><td>Row1</td><td>Row2</td></tr> 
    </table> 
<div>

目前，我隐藏溢出。我想让桌子“适合”div。

如何让这个table适合/缩小到DIV如果它变得太大而不能显示？理想情况下，文字也会缩小。

来源

2014-11-03 RobAu

该CSS将使您的表格具有与您使用的容器相同的高度/宽度。仅添加边界/背景用于可视化发生的情况。

然而，缩小文本将更具挑战性。没有使用JavaScript来实现这一点可能没有办法。即使你这样做了，由于字体太小，内容可能最终变得不可读。

我设法想出一些javascript/jquery代码来改变字体大小，直到表格适合div或font-size达到5px（= unreadable）。粗的，你需要编辑一些它自己（因为这将适用于所有的表，如果你不改变选择器的ID）

[JSFiddle]

table{ 
    width: 100%; 
    background-color: red; 
} 
th, td{ 
    width: 50%; 
    border: blue solid 1px;  
}

jQuery的/ JavaScript的

$(document).ready(function() { 
    var HeightDiv = $("div").height(); 
    var HeightTable = $("table").height(); 
    if (HeightTable > HeightDiv) { 
     var FontSizeTable = parseInt($("table").css("font-size"), 10); 
     while (HeightTable > HeightDiv && FontSizeTable > 5) { 
      FontSizeTable--; 
      $("table").css("font-size", FontSizeTable); 
      HeightTable = $("table").height(); 
     } 
    } 
});

来源

2014-11-03 11:01:03 RMo

添加一些JavaScript ^^ – RMo 2014-11-03 12:31:12

文本不可读不是一个很大的问题，主要的目标我想实现的是一个快速概述。表格单元具有背景颜色，所以即使文本不可读，表格也会提供信息。然后，如果需要，用户可以将其扩展为全尺寸。 – RobAu 2014-11-03 13:07:12

我接受了这个答案，因为它是'最好的'解决方案。我实际上通过计算高度因子对其进行了改进，并且只使用一个css（）调用。感谢您的灵感！ – RobAu 2014-11-24 08:01:28

下面是我目前使用的东西，它嵌入到一个项目中（例如参见类），但可以随意使用它作为灵感。

scaleTable = function (markupId) { 

       //This hacky stuff is used because the table is invisible in IE. 
       function realWidth(obj){ 
        var clone = obj.clone(); 
        clone.css("visibility","hidden"); 
        $('body').append(clone); 
        var width = clone.outerWidth(); 
        clone.remove(); 
        return width; 
       } 
       function realHeight(obj){ 
        var clone = obj.clone(); 
        clone.css("visibility","hidden"); 
        $('body').append(clone); 
        var height = clone.outerHeight(); 
        clone.remove(); 
        return height; 
       } 

       var table = $("#"+markupId+" table:first-of-type"); 

       var tablecontainer = $("#"+markupId).parents(".scalabletablecontainer"); 
       var scalex = tablecontainer.innerWidth()/realWidth(table); 
       var scaley = tablecontainer.innerHeight()/realHeight(table); 

       var scale = Math.min(scalex, scaley); 

       if (scale<1.0) { 
        var fontsize = 12.0 * scale; 
        var padding = 5.0 * scale; 
        $("#"+markupId+" table tbody").css("font-size", fontsize + "px"); 
        $("#"+markupId+" table tbody TD").css("padding",padding + "px"); 
        $("#"+markupId+" table TH").css("padding",padding + "px"); 
       } 
      };

来源

2015-05-15 14:46:00 RobAu

HTML表格比例适合

回答

相关问题