JSFiddle - React, Tailwind, and code Playground

by rwaldron

HTML

<table id="table">
    <thead>
        <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>
    </thead>
</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 resize() {
    var width = $('#table').width();
    console.log(width);
    $('#table').css('width', width);
}

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