JSFiddle - React, Tailwind, and code Playground

by venkateshwar

HTML

<table>
    <thead>
        <tr>
            <th>one</th>
            <th>two</th>
            <th>three</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><span>asldf lkasjdflasdkj laksdjflasdkjjf asdfasd asdf asd</span>

            </td>
            <td></td>
            <td></td>
        </tr>
    </tbody>
</table>

CSS

th, td {
    width: 33%;
    border: 1px solid black;
}
table {
    width: 100%;
}
span {
    width: 100%;    /* In pixels, it is working fine */
    display: block;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow:hidden;
}