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

td, th {
    border: 1px solid #000;
}

JavaScript

function log(message) {
    $("#logs").append("<p>" + message + "</p>");
}
function resize() {
    var width = $('#table').width();
    log(width);
    $('#table').css('width', width);
}
$('#button_resize').on('click', resize);