JSFiddle - React, Tailwind, and code Playground

by NotInUse

HTML

<table class="ex_table">
    <tbody>
        <tr>
            <td class="cell_1">Hello</td>
            <td class="cell_2">Here is some longer text</td>
            <td class="cell_3">You get the idea</td>
            <td class="cell_4">Blah Bl.</td>
        </tr>
    </tbody>
</table>

CSS

.ex_table { table-layout:fixed; width: 100%;}
.ex_table tr td { 
    white-space: nowrap; 
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 5px;
    border: 1px solid #aaa;}

.ex_table .cell_1 { width:10%; }
.ex_table .cell_2 { width:40%; }
.ex_table .cell_3 { width:30%; }
.ex_table .cell_4 { width:20%; }