JSFiddle - React, Tailwind, and code Playground

by k_rma

HTML

<table class="maintable" border=1>
    <tr>
        <td class="nowrap">Button 1</td>
        <td>
            <table class="onelinertable">
                <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>
            <table class="onelinertable">
                <tr>
                    <td>compact me</td>
                </tr>
            </table>
        </td>
        <td class="nowrap">Button 2</td>
    </tr>
</table>

CSS

body { margin: 0; }

.maintable {
    width: 100%;
    text-overflow:ellipsis;
}

.onelinertable {
    /* magic */
    width: 100%;
    table-layout: fixed;
    
    /*not really necessary, removes extra white space */
    border-collapse: collapse;
    border-spacing: 0;
    border: 0;
}
.onelinertable 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;
}