JSFiddle - React, Tailwind, and code Playground

by rwaldron

HTML

<table id="table">
    <tr>
        <th style="width: 75px;" colspan="4">Width = 75+150+75+100 + 5 = 405px</th>
    </tr>
    <tr>
        
        <th style="width: 75px;">Column 1</th>
        <th style="width: 150px;">Column 2</th>
        <th style="width: 75px;">Column 3</th>
        <th style="width: 100px;">Column 4</th>
        
    </tr>    
    <tr>
        <td style="width: 75px;">Column 1</td>
        <td style="width: 150px;">Column 2</td>
        <td style="width: 75px;">Column 3</td>
        <td style="width: 100px;">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; 
}
td, th {
    border: 1px solid #000;
    margin: 0px;
    padding: 0px;
}

JavaScript

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

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

doTest();

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