JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    <table>
        <tr>
            <td style="position:absolute;width:50px; left:0;">fr1</td>
            <td>frw2</td>
            <td>frw3</td>
            <td>frw4</td>
        </tr>
        <tr>
            <td style="position:absolute;width:50px;left:0; ">fc1</td>
            <td>dsr1</td>
            <td>dsr2</td>
            <td>dsr3</td>
        </tr>
        <tr>
            <td style="position:absolute;width:50px;left:0; ">fc2</td>
            <td>dtr1</td>
            <td>dtr2</td>
            <td>dtr3</td>
        </tr>
    </table>
</div>

CSS

div {
    width: 300px;
    overflow-x:scroll;
    margin-left:50px;
    overflow-y:visible;
    padding-bottom:1px;
}
td {
    padding: 0 40px;
}