JSFiddle - React, Tailwind, and code Playground

HTML

<table>
    <colgroup>
        <col>
        <col style="width:150px; ">
    </colgroup>
    <tbody>    
        <tr>
            <td>what</td>
            <td>Something</td>
        </tr>
        <tr>
            <td>hello</td>
            <td>A thing here</td>
        </tr>
    </tbody>
</table>

<br />
The 2nd column is <span id='colWidth'></span>px wide.

<br /><br />

<div id="testDiv" style="width:150px;">This div has a width!</div>

<br />
That div is <span id='divWidth'></span>px wide.

<hr />

Ok, let's get the width of the column with plain JavaScript!  It's <span id='forceWidth'></span>px wide.

CSS

table{
   border-top:1px solid #000;
   border-left:1px solid #000;   
}
table td{
   border-right:1px solid #000;
   border-bottom:1px solid #000; 
   padding:3px; 
   background-color:#FEFEFE;
}

#testDiv{
   border:1px solid #000;
   background-color:#FEFEFE;
}

JavaScript

//Use jQuery to get the width of a table column that has an inline style
var cw =$("table colgroup col:nth-child(2)").width();
$("#colWidth").html(cw);
//hmm... this just returns 0

//Can we get width of a div with an inline style?
var dw =$("#testDiv").width();
$("#divWidth").html(dw);
//Yep, this works fine

//Ok, so lets select it with jQuery and then just get the raw style and parse the numbers from it
var fw = parseInt($("table colgroup col:nth-child(2)")[0].style.width);
$("#forceWidth").html(fw);
//The info is there and this works fine!  What gives?