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}
th{font-size:40px}
#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 + " th,#" + Tname + " td").each(function(){
            $(this).css('font-size',(parseInt($(this).css('font-size').replace('px', ''), 10)-4)+"px");
        });
        ShrinkTable(Tname);
    }
}

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