JSFiddle - React, Tailwind, and code Playground

HTML

<div id="header"></div>
<table>
    <thead>
    <tr>
        <th>
            Столбец 1
        </th>
                 <th>
            Столбец 2
        </th> 
                 <th>
            Столбец 3
        </th> 
    </tr>
</thead>
    <tr>
        <td>
        Контент 1
        </td>
                 <td>
        Контент 2
        </td> 
                 <td>
        Контент 3
        </td> 
    </tr>
     <tr>
        <td>
        Контент 1
        </td>
                 <td>
        Контент 2
        </td> 
                 <td>
        Контент 3
        </td> 
    </tr> 
     <tr>
        <td>
        Контент 1
        </td>
                 <td>
        Контент 2
        </td> 
                 <td>
        Контент 3
        </td> 
    </tr> 
     <tr>
        <td>
        Контент 1
        </td>
                 <td>
        Контент 2
        </td> 
                 <td>
        Контент 3
        </td> 
    </tr> 
    <tr>
        <td>
        Контент 1
        </td>
                 <td>
        Контент 2
        </td>
                 <td>
        Контент 3
        </td>
    </tr> 
    <tr>
        <td>
        Контент 1
        </td>
                 <td>
        Контент 2
        </td>
                 <td>
        Контент 3
        </td>
    </tr> 
    <tr>
        <td>
        Контент 1
        </td>
                 <td>
        Контент 2
        </td>
                 <td>
        Контент 3
        </td>
    </tr> 
    <tr>
        <td>
        Контент 1
        </td>
                 <td>
        Контент 2
        </td>
                 <td>
        Контент 3
        </td>
    </tr> 
    <tr>
        <td>
        Контент 1
        </td>
                 <td>
        Контент 2
        </td>
                 <td>
        Контент 3
        </td>
    </tr> 
    <tr>
        <td>
        Контент 1
        </td>
                 <td>
        Контент 2
        </td>
                 <td>
        Контент 3
        </td>
    </tr> 
</table>

CSS

#header {
    width: 150%;
    display: block;
    position: fixed;
    background: #fff;
    overflow: hidden;
    z-index: 1;
}
#header div {
    display: table-cell;
    padding: 15px;
    border: 1px solid #ccc;
    border-collapse: collapse;
    font-weight: bold;
}
table {
    width: 150%;
}
thead {
    visibility: hidden;
}
td, th {
    border: 1px solid #ccc;
    border-collapse: collapse;
    padding: 15px;
}

JavaScript

jQuery(document).ready(function($){
    var $table = $('table'),
 $header = $('#header'),
    $thead = $('thead');
    $thead.find('th').each(function(){
        var $newdiv = $('<div />', {
            style: 'width:'+ $(this).width()+'px'
            
        });
        $newdiv.text($(this).text());
        $header.append($newdiv);
    });
    
     var $viewport = $(window); 

    $viewport.scroll(function(){
     $header.css({
         left: -$(this).scrollLeft()
     });

    });
});