JSFiddle - React, Tailwind, and code Playground

HTML

<table>
    <col width="auto" />
    <col width="80px" />
    <col width="150px" />
    <tr>
        <td>This is a thing it could be a really really really long string and I want it to truncate</td>
        <td>Thing2</td>
        <td>That thing is always short</td>
    </tr>
    <tr>
        <td>Not sure if it matters, but these rows are all dynamically generated</td>
        <td>Thing2</td>
        <td>test</td>
    </tr>
</table>

CSS

table {
    width: 100%;
    border: 1px solid gray;
    border-collapse: collapse;
    table-layout: fixed; /*added*/
}

td { 
    border: 1px solid gray;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}