JSFiddle - React, Tailwind, and code Playground

HTML

<table id="table">
    <thead>
        <tr> 
            <th>column 1</th>
            <th>column 2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><div class="cell">Aaaaaaaaaaaaaabbbbbbbbba</div></td>
            <td><div class="cell">bbbbbbbbbbbbbaaaaaaaaaaabb</div></td>
        </tr>
     </tbody>
</table>

CSS

#table {
    width:100px !important;
}

th {
 width:16% !important;
 border: 1px solid black;
}

.cell{
    width:100%;
    overflow: hidden;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    -webkit-text-overflow: ellipsis;
    white-space: nowrap;
}