JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="table-container">
    <table>
        <thead>
            <tr>
                <th>head1</th>
                <th>head2</th>
                <th>head3</th>
                <th>head4</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>content1</td>
                <td>content2</td>
                <td>content3</td>
                <td>content4</td>
            </tr>
            <tr>
                <td>content1</td>
                <td>content2</td>
                <td>content3</td>
                <td>content4</td>
            </tr>
            <tr>
                <td>content1</td>
                <td>content2</td>
                <td>content3</td>
                <td>content4</td>
            </tr>
            <tr>
                <td>content1</td>
                <td>content2</td>
                <td>content3</td>
                <td>content4</td>
            </tr>
            <tr>
                <td>content1</td>
                <td>content2</td>
                <td>content3</td>
                <td>content4</td>
            </tr>
            <tr>
                <td>content1</td>
                <td>content2</td>
                <td>content3</td>
                <td>content4</td>
            </tr>
        </tbody>
    </table>
</div>

CSS

.table-container {
    height: 10em;
}
table {
    display: flex;
    flex-flow: column;
    height: 100%;
    width: 100%;
}
table thead {
    /* head takes the height it requires, 
    and it's not scaled when table is resized */
    flex: 0 0 auto;
    width: calc(100% - 0.9em);
}
table tbody {
    /* body takes all the remaining available space */
    flex: 1 1 auto;
    display: block;
    overflow-y: scroll;
}
table tbody tr {
    width: 100%;
}
table thead,
table tbody tr {
    display: table;
    table-layout: fixed;
}
/* decorations */
.table-container {
    border: 1px solid black;
    padding: 0.3em;
}
table {
    border: 1px solid lightgrey;
}
table td, table th {
    padding: 0.3em;
    border: 1px solid lightgrey;
}
table th {
    border: 1px solid grey;
}

.colResizer{
    background-color:red;
    position:relative;
    cursor: e-resize;
}

.colHandle{
    height:20px;
    width:20px;
    background-color:transparent;
    position:absolute;
    right:-10px;
    top:0px;    
}

JavaScript

//following code is used for column resize
   $(function(){
        $("table").find("th").each(function(i,item){
            var $th=$(this);
            var text=$th.text();
            $th.html("");
            var $colHandle=$("<div class='colHandle'></div>");
            var  colResizer=$("<div class='colResizer'></div>").html(text).append($colHandle);
            $th.append(colResizer);
            $colHandle.mousedown(function(e){
                var startX=e.clientX;
                $(document).bind("mousemove",function(e){
                    $th.width($th.width()+(e.clientX-startX));
                    startX=e.clientX;
                });
                $(document).mouseup(function(){
                    $(document).unbind("mousemove");
                });
            });
        
        });

    });