JSFiddle - React, Tailwind, and code Playground

HTML

<table id="table">
    <tr>
        
        <th style="width: 75px;border: 1px solid #000;">Column 1</th>
        <th style="width: 150px;border: 0px solid #000;">Column 2</th>
        <th style="width: 75px;border: 1px solid #000;">Column 3</th>
        <th style="width: 100px;border: 1px solid #000;">Column 4</th>
        
    </tr>    
    <tr>
        <td style="width: 75px; border:1px solid black;">Column 1</td>
        <td style="width: 150px;border: 0px solid #000;">Column 2</td>
        <td style="width: 75px;border: 1px solid #000;">Column 3</td>
        <td style="width: 100px;border: 1px solid #000;">Column 4</td>

    </tr>
    
</table>

<button id="button_resize" type="button" name="button_resize">Resize</button>

<div id="logs"></div>

CSS

table {
    border-spacing: 0px;
    border-collapse: collapse; 
    border: 0px solid black;
}
td, th {
    border: 1px solid #000;
    margin: 0px;
    padding: 0px;
}

JavaScript

function doTest() {
    console.log($('#table').width() === 405 ? "PASS" : "FAIL");
    console.log($('#table').css('borderLeftWidth'));
    console.log($('#table').css('paddingLeft'));
    console.log($('#table').css('marginLeft'));
    console.log($('#table').css('width'));
    console.log($('#table').width());
}

function resize() {
    var width = $('#table').width();
    
    doTest();
    
    $('#table').css('width', width);
}

doTest();

$('#button_resize').on('click', resize).trigger("click");