JSFiddle - React, Tailwind, and code Playground

by Danny_Joris

HTML

<table>
    <tr>
        <td class="fluid hidden">ds fs sdf sdaf sdf sdf dsf sdafdsaf sdaflusdfds fdsf sadf sdf sdaf sdf sdf asdfdsaid</td>
        <td class="fixed">fixed</td>
        <td class="fluid visible">this content should always be visible.</td>
    </tr>    
</table>

CSS

table{
   width: 100%;
    table-layout:fixed;
}

td{
    padding: 10px;
}

.fixed{
    background-color: #ddd;
    width: 60px;
}

.fluid{
    background-color: #aaa;
}

.visible{
  overflow:visible;
}

.hidden{
    overflow:hidden;
    max-width:20%;
    white-space:nowrap;
}