JSFiddle - React, Tailwind, and code Playground

by Emad Armoun

HTML

<table id="HeaderTable">
        <tr>
            <td class="col1">Column1</td>
            <td class="col2">Column2</td>
        </tr>
    </table>
    <div class="myOverflow">
        <table id="BodyTable">
            <tr>
                <td class="col1">a</td>
                <td class="col2">b</td>
            </tr>
            <tr>
                <td>c</td>
                <td>d</td>
            </tr>
            <tr>
                <td>e</td>
                <td>f</td>
            </tr>
            <tr>
                <td>c</td>
                <td>d</td>
            </tr>
            <tr>
                <td>e</td>
                <td>f</td>
            </tr>
        </table>
    </div>

CSS

.myOverflow {
  height: 100px; 
  overflow-y: scroll; 
  display: inline-block;
}

.col1
{
  width: 100px;
}

.col2 {
  width: 200px;
}

td{
  border: 1px solid black;
}