JSFiddle - React, Tailwind, and code Playground

by AJIEKCEU

HTML

<div></div>
<table class="table">
  <thead>
    <tr>
      <th>Заголовок</th>
      <th>Заголовок</th>
      <th>Заголовок</th>
      <th>Заголовок Заголовок Заголовок</th>
      <th>Заголовок</th>
      <th>Заголовок</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Текст ячейки</td>
      <td>Текст ячейки</td>
      <td>Текст ячейки</td>
      <td>Текст ячейки</td>
      <td>Текст ячейки</td>
      <td>Текст ячейки</td>
    </tr>
    <tr>
      <td>Текст ячейки</td>
      <td>Текст ячейки</td>
      <td>Текст ячейки</td>
      <td>Текст ячейки</td>
      <td>Текст ячейки</td>
      <td>Текст ячейки</td>
    </tr>
    <tr>
      <td>Текст ячейки</td>
      <td>Текст ячейки</td>
      <td>Текст ячейки</td>
      <td>Текст ячейки</td>
      <td>Текст ячейки</td>
      <td>Текст ячейки</td>
    </tr>
    <tr>
      <td>Текст ячейки</td>
      <td>Текст ячейки</td>
      <td>Текст ячейки</td>
      <td>Текст ячейки</td>
      <td>Текст ячейки</td>
      <td>Текст ячейки</td>
    </tr>
    <tr>
      <td>Текст ячейки</td>
      <td>Текст ячейки</td>
      <td>Текст ячейки</td>
      <td>Текст ячейки</td>
      <td>Текст ячейки</td>
      <td>Текст ячейки</td>
    </tr>
    <tr>
      <td>Текст ячейки</td>
      <td>Текст ячейки</td>
      <td>Текст ячейки</td>
      <td>Текст ячейки</td>
      <td>Текст ячейки</td>
      <td>Текст ячейки</td>
    </tr>
    <tr>
      <td>Текст ячейки</td>
      <td>Текст ячейки</td>
      <td>Текст ячейки</td>
      <td>Текст ячейки</td>
      <td>Текст ячейки</td>
      <td>Текст ячейки</td>
    </tr>
    <tr>
      <td>Текст ячейки</td>
      <td>Текст ячейки</td>
      <td>Текст ячейки</td>
      <td>Текст ячейки</td>
      <td>Текст ячейки</td>
      <td>Текст ячейки</td>
    </tr>
    <tr>
      <td>Текст ячейки</td>
      <td>Текст ячейки</td>
      <td>Текст ячейки</td>
      <td>Текст ячейки</td>
      <td>Текст ячейки</td>
      <td>Текст ячейки</td>
    </tr>
    <tr>
      <td>Текст ячейки</td>
      <td>Текст...

CSS

.table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid #d9dde3;
  margin-bottom: 20px;
}
th {
  background: #e4e6eb;
  border: 1px solid #d9dde3;
  padding: 8px 15px;
  text-align: center;
  font-size: 13px;
}

td {
  background: #fff;
  border: 1px solid #d9dde3;
  padding: 15px;
  font-size: 14px;
}

JavaScript

$(window).scroll(function() {
   var winPos = $(window).scrollTop(),
     tablePos = $('.table').offset().top;
   if (winPos >= tablePos) {
     $('.table thead').css('transform', 'translateY(' + (winPos - tablePos) + 'px)');
   } else {
     $('.table thead').css('transform', 'translateY(0)');
   }
 });
 $(window).scroll();