JSFiddle - React, Tailwind, and code Playground

by Dipak1991

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery.perfect-scrollbar/0.6.2/css/perfect-scrollbar.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.perfect-scrollbar/0.6.2/js/min/perfect-scrollbar.jquery.min.js"></script>
<table id="table">
    <thead>
        <tr>
            <th>Name</th>
            <th>Name</th>
            <th>Name</th>
            <th>Points</th>
            <th>Name</th>
            <th>Points</th>
            <th>Name</th>
            <th>Name</th>
            <th>Name</th>
            <th>Points</th>
            <th>Name</th>
            <th>Points</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Jill</td>
            <td>Jill</td>
            <td>Smith</td>
            <td>50</td>
            <td>Smith</td>
            <td>50</td>
            <td>Jill</td>
            <td>Jill</td>
            <td>Smith</td>
            <td>50</td>
            <td>Smith</td>
            <td>50</td>
            <td>Jill</td>
            <td>Jill</td>
            <td>Smith</td>
            <td>50</td>
            <td>Smith</td>
            <td>50</td>
        </tr>
        <tr>
            <td>Jill</td>
            <td>Jill</td>
            <td>Smith</td>
            <td>50</td>
            <td>Smith</td>
            <td>50</td>
            <td>Jill</td>
            <td>Jill</td>
            <td>Smith</td>
            <td>50</td>
            <td>Smith</td>
            <td>50</td>
            <td>Jill</td>
            <td>Jill</td>
            <td>Smith</td>
            <td>50</td>
            <td>Smith</td>
            <td>50</td>
        </tr>
        <tr>
            <td>Jill</td>
            <td>Jill</td>
            <td>Smith</td>
            <td>50</td>
            <td>Smith</td>
            <td>50</td>
            <td>Jill</td>
            <td>Jill</td>
            <td>Smith</td>
            <td>50</td>
            <td>Smith</td>
            <td>50</td>
            <td>Jill</td>
         ...

CSS

.table-wrapper {
    width: 20%;
    height: 150px;     
    margin:0;
    padding:0;    
    box-sizing: border-box;
    position: relative;
}
.fixed-header {      
    background: #e7e7e7;   
    position: absolute;
    top:0;
}
.table-body {
    position: absolute;
    top: 30px;
    height: 150px;     
}
th, td {
    font-size:10px;
}

JavaScript

$(function () {
    var $tableHeader,
        $tableBody;
    var $headerTable = $('<table>');
    var $bodyTable = $('<table>');
    var $clonedTableHeader = $('table').find('thead:first').clone();
    var $clonedTableBody = $('table').find('tbody:first').clone();
    var $headerWrapper = $('<div class="fixed-header"></div>');
    var $bodyWrapper = $('<div class="table-body"></div>');
    var $tableWrapper = $('<div class="table-wrapper"></div>');


    $('#table').remove();

    $tableHeader = $headerTable;
    $tableBody = $bodyTable;
    
    $headerWrapper.append($tableHeader.append($clonedTableHeader));
    $bodyWrapper.append($tableBody.append($clonedTableBody));
    $tableWrapper.append($headerWrapper).append($bodyWrapper)

    $tableWrapper.appendTo('body');
    
    $('.table-body').perfectScrollbar();
});