JSFiddle - React, Tailwind, and code Playground

by 3rror404

HTML

<h2>Default</h2>
<table>
    <tr>
        <td>This is a too long text for my cell width</td>
        <td>This is a too long text for my cell width</td>
        <td>This is a too long text for my cell width</td>
        <td>This is a too long text for my cell width</td>
        <td>This is a too long text for my cell width</td>
        <td>This is a too long text for my cell width</td>
    </tr>
</table>

<hr>

    
    <h2>With "white-space: nowrap;"</h2>
<table class="nowrap">
    <tr>
        <td>This is a too long text for my cell width</td>
        <td>This is a too long text for my cell width</td>
        <td>This is a too long text for my cell width</td>
        <td>This is a too long text for my cell width</td>
        <td>This is a too long text for my cell width</td>
        <td>This is a too long text for my cell width</td>
    </tr>
</table>

CSS

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

table.nowrap {
    white-space: nowrap;
}