web-dev-qa-db-ja.com

フィットするHTMLテーブルスケール

小さなグラフがたくさんあるKPIダッシュボードがあります。グラフの1つのタイプは、実際には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に合わせて縮小するにはどうすればよいですか？理想的には、テキストも縮小します。

htmlcsshtml-tablewidthscaling
5
RobAu

このCSSにより、テーブルは使用しているコンテナと同じ高さ/幅になります。境界線/背景は、何が起こるかを視覚化するためにのみ追加されます。

ただし、テキストを縮小することははるかに困難です。それを達成するためにjavascriptを使用せずにおそらく方法はありません。また、フォントサイズが小さすぎるために、コンテンツが読み取れなくなる可能性があります。

テーブルがdivに収まるか、フォントサイズが5px（=判読不能）に達するまで、フォントサイズを変更するためのjavascript/jqueryコードを思いついた。大まかに言うと、その一部を自分で編集する必要があります（セレクターを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();
        }
    }
});
4
RMo

前のコメントに示されているように、テーブルとdivのディメンションを取得します。次に、cssを適用します

transfrom:scale(factorX, factorY)

テーブルに。

0
Roland

これが私が現在使用しているもので、プロジェクトに埋め込まれています（たとえば、クラスを参照）が、インスピレーションとして自由に使用してください。

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