JSFiddle - React, Tailwind, and code Playground

HTML

<table>
    <thead>
        <tr>
            <th>Button 1</th>
            <th>&hellip; Cell Text &hellip;</th>
            <th>Button 2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <button>Uno</button>
            </td>
            <td>A really super-duper long chunk of text that would normally make the table way too wide, but thanks to CSS and responsive layouts will automatically truncate itself and use an ellipsis (&hellip;) to indicate where the truncation occurs. Resize the window to test it.</td>
            <td>
                <button>Dos</button>
            </td>
        </tr>
    </tbody>
</table>

CSS

table {
    width: 100%;
    table-layout: fixed;
}
td:nth-child(2) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}