JSFiddle - React, Tailwind, and code Playground

by uggway

HTML

<div class="outer">
    <div class="inner">
        <table>
            <tbody>
                <tr>
                    <th>Lorem ipsum.</th>
                    <th>Inventore, at.</th>
                    <td>Facilis, voluptatum.</td>
                    <td>Laboriosam, voluptatibus.</td>
                    <td>Voluptatibus, eaque!</td>
                    <td>Molestiae, cupiditate!</td>
                    <td>Vel, odio.</td>
                    <td>Maxime, dicta.</td>
                    <td>Modi, laboriosam.</td>
                    <td>Pariatur, non.</td>
                </tr>
                <tr>
                    <th>Lorem ipsum.</th>
                    <th>Saepe, voluptas?</th>
                    <td>Doloribus, quidem.</td>
                    <td>Omnis, nam!</td>
                    <td>Culpa, ut.</td>
                    <td>Ex, est?</td>
                    <td>Suscipit, ab.</td>
                    <td>Ex, doloremque?</td>
                    <td>Cum, libero.</td>
                    <td>Officia, perspiciatis!</td>
                </tr>
                <tr>
                    <th>Lorem ipsum.</th>
                    <th>Mollitia, provident!</th>
                    <td>Quae, sit.</td>
                    <td>Sapiente, repellat.</td>
                    <td>Molestias, distinctio?</td>
                    <td>Tempora, omnis!</td>
                    <td>Officiis, ex.</td>
                    <td>Repellat, quae.</td>
                    <td>Porro, delectus?</td>
                    <td>Voluptatum, porro.</td>
                </tr>
                <tr>
                    <th>Lorem ipsum.</th>
                    <th>Animi, quisquam!</th>
                    <td>Dicta, aliquam.</td>
                    <td>Ea, nisi.</td>
                    <td>Rem, labore.</td>
                    <td>Eos, eveniet.</td>
                    <td>Velit, eligendi.</td>
                    <td>Esse, incidunt.</td>
                    <td>Provident, accusantium?</td>
 ...

CSS

table {
    width: 100%;
}
th {
    background-color: #0074d9;
    color: #fff;
    position: absolute;
    left: 0;
    width: 100px;
}
.outer {
    position: relative
}
.inner {
    overflow-x: scroll;
    overflow-y: visible;
    width: 400px;
    margin-left: 100px;
}