HTML table scale to fit

Question

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.

Rob Monhemius · Accepted Answer · 2014-11-03T12:30:23.093

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

Text unreadable is not a big problem, the main goal I want to achieve is a quick overview. The table cells have a background color, so even when the text is unreadable, the table will give information. Then the user can expand it to its full size, if required . — Rob Audenaerde, Nov 03 '14 at 13:07
I accepted this answer as it is the 'best' solution. I actually improved on it by calculating the height-factor, and only use one css() call. Thanks for the inspiration! — Rob Audenaerde, Nov 24 '14 at 08:01

score 0 · Answer 2 · answered May 15 '15 at 14:46

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

score 0 · Answer 3 · edited Jun 08 '19 at 14:30

0

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

transfrom:scale(factorX, factorY)

to the table.

edited Jun 08 '19 at 14:30

Zoe

27,060
21
118
148

answered Jun 08 '19 at 14:15

Roland

11

HTML table scale to fit

3 Answers3