JSFiddle - React, Tailwind, and code Playground

by Oski Krawczyk

HTML

<div class="tcont">
    <table>
        <tbody>
            <tr>
                <td class="hd sh td1">#1#</td>
                <td class="hd td2">
                    <span>lorem ipsum sit amet dolor</span>
                </td>
                <td class="td3">#333 333#</td>
                <td class="td4">#4 4 4 4 4 4 4 4 4 4 4 4 4#</td>
            </tr>
            <tr>
                <td class="hd sh td1">#1#</td>
                <td class="hd td2">#22222 2222#</td>
                <td>#333 333#</td>
                <td>#4 4 4 4 4 4 4 4 4 4 4 4 4#</td>
            </tr>
            <tr>
                <td class="hd sh td1">#1#</td>
                <td class="hd td2">#22222 2222#</td>
                <td>#333 333#</td>
                <td>#4 4 4 4 4 4 4 4 4 4 4 4 4#</td>
            </tr>
        </tbody>
    </table>
</div>

SCSS

.tcont {
    border: solid 1px red;
    overflow-x: auto;
}

table {
    border-spacing: 0;
    border-collapse: collapse;
    box-sizing: border-box;
    table-layout: fixed;
    margin-left: 200px;
    
    .hd {
        background: #ccc;
        position: absolute;
        left: 0;
        min-width: 150px;
        max-width: 150px;
    }
    
    .sh {
        min-width: 50px;
        max-width: 50px;
    }
    
    .hd + .hd {
        left: 50px;
    }
    
    .td3 {
        width: 150px;
        max-width: 150px;
    }
    
    .td4 {
        width: 350px;
        max-width: 350px;
    }

    td {
        background: #fff;
        white-space: nowrap;
        border-right: solid 1px red;
        
        span {
            display: block;
            width: 95%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
    }
}