JSFiddle - React, Tailwind, and code Playground

HTML

<table class="myTable">
    <tr>
        <td class="td1"><div>Very very very long text Very very very long text Very very very long text Very very very long text</div></td>
        <td class="td2"><div>Content 2</div></td>
        <td class="td3"><div>Content 3 also so very lonnnnngggg</div></td>
    </tr>
</table>

<table class="myTable">
    <tr>
        <td class="td4"><div>Very very very long text Very very very long text Very very very long text Very very very long text</div></td>
        <td class="td5"><div>Content 2 has very very very many texts in a very very very long way</div></td>
        <td class="td6"><div>Content 3</div></td>
    </tr>
</table>

CSS

div { width: 0; min-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    table.myTable { width: 100%; border-collapse: collapse; }
    td { border: 1px solid #000; }

    td.td1 { width: 100%; min-width: 50px; }
    td.td2 { width: 100px; min-width: 100px; }
    td.td3 { width: 150px; min-width: 150px; }

    td.td4 { width: 50%; min-width: 50px; }
    td.td5 { width: 50%; min-width: 50px; }
    td.td6 { width: 150px; min-width: 150px; }