JSFiddle - React, Tailwind, and code Playground

by Dörnesz Tamás

HTML

<table>
    <tr>
        <td>Fills space</td>
        <td class="min">id</td>
        <td class="min">tiny</td>
        <td class="cell-collapse"><span>Fills space, it is very very very very large</span></td>
        <td class="min">123</td>
        <td class="min">small</td>
        <td>Fills space, wider</td>
        <td>Fills space</td>
        <td class="min">thin</td>
    </tr>
</table>

CSS

table {
    width: 100%;    
}

tr {
    
}

td {
    width: auto;
    border: 1px solid red;
    white-space: nowrap;
}

td.min {
    width: 1%;
    white-space: nowrap;
}

td.cell-collapse {
    text-align: left;
    background-color: #fff;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
}

JavaScript

/*
var collapsing_cells = document.getElementsByClassName('cell-collapse');

for (var i = 0; i < collapsing_cells.length; i++)
{
    var cell_width = collapsing_cells[i].offsetWidth;
    var text_width = collapsing_cells[i].getElementsByTagName('span')[0].offsetWidth;
    
    console.log(cell_width + ' - ' + text_width);
    
    if (text_width > cell_width)
    {
        collapsing_cells[i].className += ' add-ellipses';
    }
}
*/