JSFiddle - React, Tailwind, and code Playground

HTML

<table>
    <thead>
        <tr>
            <th style="width:165px">Name</th>
            <th style="width:80px">Country</th>
        </tr>
    </thead>
    <tbody id="mytbody">
        <tr>
            <td style="width:165px">Mart Poom</td>
            <td style="width:80px">Estonia</td>
        </tr>
        <tr>
            <td>David Loria</td>
            <td>Kazakhstan</td>
        </tr>
        <tr>
            <td>Wojciech Szczęsny</td>
            <td>Poland</td>
        </tr>
        <tr>
            <td>Gianluigi Buffon</td>
            <td>Italy</td>
        </tr>
        <tr>
            <td>Igor Akinfeev</td>
            <td>Russia</td>
        </tr>
    </tbody>
</table>

CSS

table{
    width:245px;
    font: 11px arial;
    table-layout: fixed;
}
thead{
    width: calc(100% - 17px);
    display:block;
}

tbody{
    display:block;
    overflow-y: auto;
    height:100px;
}
th, td{
    border:1px solid #000;
}

JavaScript

var t = document.getElementById("mytbody");
if (t.clientHeight == t.scrollHeight)
{
    t.style.width = "224px";
}