JSFiddle - React, Tailwind, and code Playground

HTML

<table id="HEAD">     
    <tr>         
        <th id="h1">Name</th>         
        <th>H2</th>         
        <th>H3</th>              
        <th>H4</th>             
    </tr>    
</table> 
<table id="ROWS">     
    <tr>         
        <td id="c1" style="min-width:100%;width:100%;">William Smith</td>
        <td style="min-width:50px;width:50px;">abc</td>
        <td style="min-width:50px;width:50px;">123</td>
        <td style="min-width:50px;width:50px;">one two three</td>
    </tr>
</table>

CSS

table 
{
    background:#DFE3E8; border:solid 1px #000;  
    table-layout:fixed; border-collapse:collapse;
}

th,td 
{ 
    padding:0 4px;
    border:solid 1px #000; white-space:nowrap; height:23px;
    min-width:50px;
}
th {background:#DFE3E8;}         
td {background:#FFF;}

JavaScript

var hCells = $("table:first th"); //Header Cells
var rCells = $("table").eq(1).find("tr:first td"); //1st Row's Cells

var w, hc;
for (var c = 0; c < hCells.length; c++)
{
    w  = $(rCells[c]).width();
    hc = $(hCells[c]);
    hc.css("min-width", w).width(w);
}