JSFiddle - React, Tailwind, and code Playground

by Alex Rutherford

HTML

<table border="1">
    <tr>
    <th>head1</th>
    <th>head2</th>
    <th>head3</th>
    <th>head4</th>
    </tr>
</table>
<div class="scroll">
    <table>
        <tr><td>Text Text</td><td>Text Text</td><td>Text Text</td><td>Text Text</td></tr>
        <tr><td>Text Text</td><td>Text Text</td><td>Text Text</td><td>Text Text</td></tr>
        <tr><td>Text Text</td><td>Text Text</td><td>Text Text</td><td>Text Text</td></tr>
        <tr><td>Text Text</td><td>Text Text</td><td>Text Text</td><td>Text Text</td></tr>
        <tr><td>Text Text</td><td>Text Text</td><td>Text Text</td><td>Text Text</td></tr>
        <tr><td>Text Text</td><td>Text Text</td><td>Text Text</td><td>Text Text</td></tr>
        <tr><td>More Text</td><td>More Text</td><td>More Text</td><td>More Text</td></tr>
        <tr><td>Text Text</td><td>Text Text</td><td>Text Text</td><td>Text Text</td></tr>
        <tr><td>Even More Text Text</td><td>Even More Text Text</td><td>Even More Text Text</td><td>Even More Text Text</td></tr>
    </table>
</div>

CSS

table {
    width: 500px;
}

.scroll {
    max-height: 60px;
    overflow: auto;
}