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>

CSS

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

JavaScript

function ShrinkTable(Tname) {
var FontSize = parseInt($("#" + Tname ).css('font-size').replace('px', ''),10);
var TabWidth = $("#" + Tname ).width();
    alert(TabWidth)
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();
}
}

$(document).ready(function() {
ShrinkTable("MyTable");
});