JSFiddle - React, Tailwind, and code Playground

HTML

<div id="outer">
        <div id="middle">
            <table id="inner">
                <tr>
                    <td>this is some random text</td>
                    <td>this is some random text</td>
                    <td>this is some random text</td>
                    <td>this is some random text</td>
                </tr>
            </table>
        </div>
    </div>

CSS

#outer {
            height : 200px;
            width : 200px;
            background : red;
            overflow : auto;
            padding : 10px;
        }
        
        #middle {
            background : white;
            padding : 10px;
        }
        
        #inner {
            border : 1px solid purple;
    		table-layout: fixed;
    		width: 100%;
        }
        
        td {
            background : cyan;
            padding : 5px;
            border : 1px solid blue;
        }