CODEWITHSUNDEEP
htmlcsshtml-tablewidthscaling
Rob Audenaerde
Rob Audenaerde

Reputation: 20039

HTML table scale to fit

I have a KPI dashboard with a lot of small charts. One type of chart is in fact a HTML table. It is displayed in a 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>

Currently, I hide the overflow. I would like to make the table 'fit' the div.

How can I make this table to fit/scale down to the DIV if it would become too big to diplay? Ideally, the text would also shrink.

Upvotes: 6

Views: 44264

Answers (3)

Roland
Roland

Reputation: 11

Get table and div dimensions as shown in the previous comments. Then apply css:

transform:scale(factorX, factorY)

to the table.

Upvotes: 0

Rob Audenaerde
Rob Audenaerde

Reputation: 20039

Here is what I use currently, it is embedded in a project (see for example the classes), but feel free to use it as inspiration.

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

Upvotes: 0

Rob Monhemius
Rob Monhemius

Reputation: 5144

This CSS will make your table have the same height/width as the container you are using. Borders/background are only added for visualising what happens.

Shrinking the text will however be far more challenging. There is probably no way without using javascript to achieve that. And even if you did, content might end up being unreadable because of a too small font-size.

I managed to come up with some javascript/jquery code to change the font-size until the table fits the div or the font-size reaches 5px (= unreadable). Of coarse you will need to edit some of it yourself (because it would apply on all tables if you don't change the selectors to id's)

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

Upvotes: 5

Related Questions