JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <h1>200px</h1>
    <p><strong><em>Tip:</em></strong> hover the mouse on a cell to see the plugin in action.</p>
    <table border="1" style="width:200px">
        <thead>
            <tr>
                <th>Col 1</th>
                <th>Col 2</th>
                <th>Col 3</th>
                <th>Col 4</th>
                <th>Col 5</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Small text</td>
                <td>Medium sized text</td>
                <td>This is an incredibly monstruous large text that no display on the world is capable of rendering completely</td>
                <td>This is a super large sized text additional text</td>
                <td>This is a large sized text</td>
            </tr>
        </tbody>
    </table>
    
    <h1>400px</h1>
    <table border="1" style="width:400px">
        <thead>
            <tr>
                <th>Col 1</th>
                <th>Col 2</th>
                <th>Col 3</th>
                <th>Col 4</th>
                <th>Col 5</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Small text</td>
                <td>Medium sized text</td>
                <td>This is an incredibly monstruous large text that no display on the world is capable of rendering completely</td>
                <td>This is a super large sized text additional text</td>
                <td>This is a large sized text</td>
            </tr>
        </tbody>
    </table>
    
    <h1>800px</h1>
    <table border="1" style="width:800px">
        <thead>
            <tr>
                <th>Col 1</th>
                <th>Col 2</th>
                <th>Col 3</th>
                <th>Col 4</th>
                <th>Col 5</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Small text</td>
                <td>Medium sized text</td>
                <td>This is an incredibly monstruous large text that no...

JavaScript

/**
* jquery-tableoverflow.js
* https://github.com/marcogrcr/jquery-tableoverflow
*
* License of use:
*
* 1. You may use and modify this plugin as you see fit.
* 2. Please credit the original author by preserving this header :)
*/
(function ($) {
    var
        $tables = $(),
        timeout = null;

    // Timeout-based resize event to improve performance.
    function onResize() {
        if (timeout) {
            clearTimeout(timeout);
        }

        timeout = setTimeout(resizeColumns, 200);
    }

    function resizeColumns() {
        // Clean $tables from elements removed from the DOM.
        $tables.each(function () {
            if (!$.contains(document.documentElement, this)) {
                $tables = $tables.not(this);
            }
        });

        // Resize the columns of each table.
        $tables.each(function () {
            var $table = $(this);

            // Set all columns of the table to equal width.
            // Get a map for each column with the th, col and tds elements.
            var $columns = $('colgroup col', $table)
                .css('width', '')
                .map(function (i) {
                    return {
                        $col: $(this),
                        $th: $('thead th:eq(' + i + ')', $table)
                    };
                });

            // Balance the column widths until no further balance is required.
            while ($columns.length) {
                $columns.each(function () {
                    // Get the min, max and actual width.
                    var
                        actualWidth = this.$th.outerWidth(),
                        minWidth    = this.$col.data('tableoverflow-min-width'),
                        maxWidth    = this.$col.data('tableoverflow-max-width');

                    if (actualWidth < minWidth || actualWidth > maxWidth) {
                        // Force the min or max width if necessary.
                        if (actualWidth < minWidth) {
      ...