JSFiddle - React, Tailwind, and code Playground

by Mouxon

HTML

<html>
    <head>
        <style type="text/css">
            table {
                border-spacing: 0px;
                border-collapse: collapse; 
            }
            td, th {
                border: 1px solid #000;
                margin: 0px;
                padding: 0px;
            }
        </style>
        
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
        
    </head>
    <body>
        <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>
    </body>
</html>

JavaScript

$(function() {
            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);
        });