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表格比例適合

回答

相關問題