JSFiddle - React, Tailwind, and code Playground

HTML

SÃ¥dan her skal den se ud: <br />
<table>
    <tr>
        <td colspan="6" class="xtrawide">&nbsp;</td>
    </tr>
    <tr>
        <td colspan="2" class="wide">&nbsp;</td>
        <td colspan="2" class="wide">&nbsp;</td>
        <td colspan="2" class="wide">&nbsp;</td>
    </tr>
    <tr>
        <td class="fixed">&nbsp;</td>
        <td class="auto">&nbsp;</td>
        <td class="fixed">&nbsp;</td>
        <td class="auto">&nbsp;</td>
        <td class="fixed">&nbsp;</td>
        <td class="auto">&nbsp;</td>
    </tr>
</table>
<br /><br />
Det her er problemet: <br />
<table>
    <tr>
        <td colspan="6" class="xtrawide">&nbsp;</td>
    </tr>
    <tr>
        <td colspan="2" class="wide">&nbsp;</td>
        <td colspan="2" class="wide">&nbsp;</td>
        <td colspan="2" class="wide">&nbsp;</td>
    </tr>
    <tr>
        <td class="fixed">&nbsp;</td>
        <td class="auto"><div class="truncate">Det her er en meget lang tekst... bla bla bla</div></td>
        <td class="fixed">&nbsp;</td>
        <td class="auto">&nbsp;</td>
        <td class="fixed">&nbsp;</td>
        <td class="auto">&nbsp;</td>
    </tr>
</table>

CSS

table {
    width: 100%;
}
.xtrawide { 
    border: 1px solid yellow;
}
.wide {
    border: 1px solid green;
}
.fixed {
    border: 1px solid red;
    width: 50px;
}
.auto
{
    border: 1px solid blue;
}
.truncate
{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
}