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

- Rob Audenaerde

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();
        }
    }
});

- Rob Monhemius

---

添加了一些 JavaScript ^^ - Rob Monhemius

无法阅读的文本并不是一个大问题，我想要实现的主要目标是快速概览。表格单元格有背景颜色，因此即使文本无法阅读，表格也会提供信息。然后用户可以根据需要将其展开到完整大小。 - Rob Audenaerde

我接受了这个答案，因为它是“最佳”解决方案。实际上，我通过计算高度因子并仅使用一个css()调用来改进了它。感谢您的启发！ - Rob Audenaerde

RobAu，您能将改进意见发布为答案吗？ - kingPuppy

Answer 2

这是我目前使用的，它嵌入在一个项目中（例如查看类），但随意将其用作灵感。

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");
                }
            };

- Rob Audenaerde

Answer 3

获取表格和div的尺寸，如前面的评论所示。然后应用CSS。

transfrom:scale(factorX, factorY) 

到表格中。

- Roland