HTML 表格缩放以适应

Question

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

<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？理想情况下，文本也会缩小。

Answer 1

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

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

我设法想出了一些 javascript/jquery 代码来更改字体大小，直到表格适合 div 或字体大小达到 5px（= 不可读）。粗略地说，您需要自己编辑其中的一些（因为如果您不将选择器更改为 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();
        }
    }
});