JSFiddle - React, Tailwind, and code Playground

by JonNorman

HTML

<div id="narrorColumn">
    <table id="MyTable">
        <thead><tr><th>1</th><th>2</th></tr></thead>
        <tbody><tr><td>A</td><td>2</td></tr></tbody>
    </table>
</div>
<a href="#" id="clickMe">click me to do it</a>

CSS

table{font-size:36px}
#narrorColumn{width:30px}

JavaScript

function ShrinkTable(Tname) {
    var FontSize = parseInt($("#" + Tname).css('font-size').replace('px', ''), 10);
    var TabWidth = $("#" + Tname).width();
    var DivWidth = $("#narrorColumn");
    if (parseInt(DivWidth.css('width').replace('px', ''), 10) <= TabWidth) {
        $("#" + Tname).css('font-size', FontSize - 4 + 'px'); /* you can change 4 with any number, the smaller is better but it may require more loop */
        $("#" + Tname + "th").css('font-size', FontSize - 4 + 'px');
        //Shrink the font while div width is less than table width
        ShrinkTable(Tname);
    }
}

$(document).ready(function() {
    $("#clickMe").click(function(event) {
        ShrinkTable("MyTable");
        evenbt.preventDefault();
    });
});