JSFiddle - React, Tailwind, and code Playground

HTML

<table border=1 >
    <tbody>
        <tr>
            <td>
            </td>
        </tr>
        <tr>
            <td>
            </td>
            <td>
            </td>
        </tr>
        <tr>
            <td>
            </td>
            <td>
            </td>
            <td>
            </td>
        </tr>
        <tr>
            <td>
            </td>
        </tr>
    </tbody>
</table>

CSS

table{
    width: 200px;
    height: 200px;
    table-layout: fixed;
}
tr{
    width:100%;
}
td{
    width: auto;
}

JavaScript

$(function() {
    // Get a reference to the table's tbody element, and define the number of columns
    var $tbody = $('table').find('tbody'),
        columns = 3;
    
    // Loop through each tr within the table's tbody
    $tbody.find('tr').each(function() {
    
        // Determine the number of cells, and set the colspan
        var children = $(this).children().size(),
            colspan = columns / children;
    
        // If the colspan variable is set to *.5, give the first cell higher colspan
        if (colspan % 1 === 0.5) {
            $(this).children('td').attr('colspan', colspan - 0.5);
           $(this).children('td:first').attr('colspan', colspan + 0.5);
        }
        // Otherwise give all cells equal colspan
        else
            $(this).children('td').attr('colspan', colspan);
    });
});