JSFiddle - React, Tailwind, and code Playground

by roberkules

HTML

<table border="1">
    <tr>
        <td colspan="2">This cells has more content. Much more than before.</td>
        <td>Less content here</td>
    </tr>
</table>

CSS

table.fred {
    width: 100%;
    white-space: nowrap;
    table-layout: fixed;
}

td {
    overflow: hidden;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    padding: 2px 5px;
}


table.calculating {
    width: auto;
    white-space: nowrap;
    table-layout: normal;
    position:absolute;
}

table.calculating td {
    overflow: show;
}

JavaScript

$.fn.equalizeTable = function() {
    
    // iterate through tables only
    this.filter("table").each(function() {
        
        var table = $(this),
            cellWidths = [];
        
        table.addClass("fred").addClass("calculating");
        
        // find longest cell of each column
        // iterate through rows in case first row(s) use colspan
        $("tr", table).each(function(i, tr) {
            
            var colspanFound = false;
            
            // iterate through all cells of this row
            $("td", tr).each(function(j, td) {
                
                td = $(td);
                // if first row, add
                if (td.attr("colSpan") > 1) {
                    if (1 == j) {
                        cellWidths[cellWidths.length + td.attr("colSpan")] = 0;
                    }
                    colspanFound = true;
                    return;
                }
                
                if (1 == j) {
                    cellWidths[cellWidths.length] = td.width();
                }
            });
        });
        
        console.log(cellWidths);
        
        table.removeClass("calculating");
    });
    
    
    
    $(window).resize(function(e) {
        
    });
    
    return this;
};

$(function(){
    $("table").equalizeTable();
});