JSFiddle - React, Tailwind, and code Playground

by bstaley

HTML

<table>
    <tr>
        <td>Flex 1</td>
        <td>Flex 2</td>
        <td>Fixed 1</td>
        <td>Flex 3</td>
    </tr>
    <tr>
        <td>Col1</td>
        <td>Col2</td>
        <td><span class='fixed'>Col3Col3Col3Col3Col3Col3Col3Col3Col3Col3Col3Col3Col3Col3Col3Col3Col3 Col3Col3Col3Col3Col3Col3Col3Col3Col3Col3Col3Col3Col3Col3Col3Col3 Col3Col3Col3Col3Col3Col3Col3Col3Col3Col3</span></td>
        <td>Col4</td>
    </tr>
</table>

CSS

table{
    width:100%;
}

td{
    border: rgb(0,0,0) 1px solid;
}

tr{
    max-height:200px;
}

.fixed{
    width:250px;
    overflow:hidden;
}