JSFiddle - React, Tailwind, and code Playground

by Corentin Ballot

HTML

<div class="container">
    <table>
        <thead>
            <tr>
                <th class="fixed">fixed</th>
                <th class="fixed">fixed</th>
                <th class="fixed">fixed</th>
                <th class="fluid">fluid</th>
                <th class="fixed">fixed</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>fixed</td>
                <td>fixed</td>
                <td>fixed</td>
                <td class="fluid"><div align="left">Some text here which gets truncated, however should have min width</div></td>
                <td>fixed</td>
            </tr>  
        </tbody>            
    </table>
</div>

CSS

.container {
    max-width: 900px;
}

table {
    table-layout: fixed;
    width: 100%;
     min-width: 500px;
    border: 1px solid #333;
    border-collapse: separate;
    border-spacing: 0;
}
th { min-width: 10px;}

th.fixed {
    width: 100px;
    min-width: 100px;
    
}

th.fluid {
    min-width: 100px;
}

td.fluid div {
	width: 100%;
    min-width:100px;
	white-space: nowrap; 
	overflow: hidden;
	text-overflow: ellipsis;
}

td.fluid {
    background-color: #aaa;
    min-width: 100px;
    width: 100%;
}

td {
    background-color: #ddd;
     min-width: 100px;
    border-right: 1px solid #333;
}
 tr td {
     text-align: center;
}
 }

table th, table td {
    border-top: 1px solid #333; min-width: 100px;
}