text-overflow: ellipsis in table-cell without width

This is not really a clean solution, but it uses no JS and works in every browser I’ve tested.

My solution consists in wrapping the cell’s contents inside a table with table-layout: fixed and width: 100%.

See the demo.

Here’s the full solution:

<table class="main-table">
    <tr>
        <td class="nowrap">Button 1</td>
        <td>
            <table class="fixed-table">
                <tr>
                    <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus doloremque magni illo reprehenderit consequuntur quia dicta labore veniam distinctio quod iure vitae porro nesciunt. Minus ipsam facilis! Velit sapiente numquam.</td>
                </tr>
            </table>
        </td>
        <td class="nowrap">Button 2</td>
    </tr>
</table>

.main-table {
    width: 100%;
}

.fixed-table {
    /* magic */
    width: 100%;
    table-layout: fixed;
    
    /*not really necessary, removes extra white space */
    border-collapse: collapse;
    border-spacing: 0;
    border: 0;
}
.fixed-table td {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nowrap {
    /* used to keep buttons' text in a single line,
     * remove this class to allow natural line-breaking.
     */
    white-space: nowrap;
}

It’s not really clear what’s the intent for the side buttons, hence I’ve used white-space: nowrap to keep them in the same line. Depending on the use case, you may prefer to apply a min-width and let them line-break naturally.