JSFiddle - React, Tailwind, and code Playground

by Francois Wahl

HTML

<table border="1">
    <colgroup>
        <td width="100px">Column 1</td>
        <td width="100px">Column 2</td>
        <td width="100px">Column 3</td>
        <td width="16px" style="background-color: gray;"><td>
    </colgroup>
</table>
<div style="position: absolute; height:75px; overflow-y:scroll; overflow-x:auto">
    <table border="1">
        <colgroup>
            <td width="100px"></td>
            <td width="100px"></td>
            <td width="100px"></td>
        </colgroup>
        <tbody>
            <tr>
                <td>Row 1 - Cell 1</td>
                <td>Row 1 - Cell 2</td>
                <td>Row 1 - Cell 3</td>
            </tr>
            <tr>
                <td>Row 2 - Cell 1</td>
                <td>Row 2 - Cell 2</td>
                <td>Row 2 - Cell 3</td>
            </tr>
            <tr>
                <td>Row 3 - Cell 1</td>
                <td>Row 3 - Cell 2</td>
                <td>Row 3 - Cell 3</td>
            </tr>
            <tr>
                <td>Row 4 - Cell 1</td>
                <td>Row 4 - Cell 2</td>
                <td>Row 4 - Cell 3</td>
            </tr>
            <tr>
                <td>Row 5 - Cell 1</td>
                <td>Row 5 - Cell 2</td>
                <td>Row 5 - Cell 3</td>
            </tr>
            <tr>
                <td>Row 6 - Cell 1</td>
                <td>Row 6 - Cell 2</td>
                <td>Row 6 - Cell 3</td>
            </tr>
        </tbody>
    </table>
</div>