JSFiddle - React, Tailwind, and code Playground

by scooterlord

HTML

<table>
  <thead>
    <tr>
      <th scope="col">header</th>
      <th scope="col">header</th>
      <th scope="col">header</th>
      <th scope="col">header</th>
      <th scope="col">header</th>
      <th scope="col">header</th>
      <th scope="col">header</th>
      <th scope="col">header</th>
      <th scope="col">header</th>
      <th scope="col">header</th>
      <th scope="col">header</th>
      <th scope="col">header</th>
      <th scope="col">header</th>
      <th scope="col">header</th>
      <th scope="col">header</th>
      <th scope="col">header</th>
      <th scope="col">header</th>
      <th scope="col">header</th>
      <th scope="col">header</th>
      <th scope="col">header</th>
      <th scope="col">header</th>
      <th scope="col">header</th>
      <th scope="col">header</th>
      <th scope="col">header</th>
      <th scope="col">header</th>
      <th scope="col">header</th>
      <th scope="col">header</th>
      <th scope="col">header</th>
      <th scope="col">header</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td role="gridcell">data</td>
      <td role="gridcell">data</td>
      <td role="gridcell">data</td>
      <td role="gridcell">data</td>
      <td role="gridcell">data</td>
      <td role="gridcell">data</td>
      <td role="gridcell">data</td>
      <td role="gridcell">data</td>
      <td role="gridcell">data</td>
      <td role="gridcell">data</td>
      <td role="gridcell">data</td>
      <td role="gridcell">data</td>
      <td role="gridcell">data</td>
      <td role="gridcell">data</td>
      <td role="gridcell">data</td>
      <td role="gridcell">data</td>
      <td role="gridcell">data</td>
      <td role="gridcell">data</td>
      <td role="gridcell">data</td>
      <td role="gridcell">data</td>
      <td role="gridcell">data</td>
      <td role="gridcell">data</td>
      <td role="gridcell">data</td>
      <td role="gridcell">data</td>
      <td role="gridcell">data</td>
      <td role="gridcell">data</td>
     ...

SCSS

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

table {
  th,
  td {
    line-height: 20px;
    &:first-child {
      span {
        background: tomato;
        color: #fff;
        margin-top: -10px;
        display:block;
        position:fixed;
        left:0;
      }
    }
  }
}

JavaScript

var cellWidth=$('th:first-child').width();

$('table').attr('style', 'margin-left:'+cellWidth+'px;');

$('th:first-child, td:first-child').each(function() {
  $(this).wrapInner('<span></span>');
  $(this).find('span').attr('style', 'width:'+cellWidth+'px;');
})
$(window).on('scroll', function() {
  var scr = -$(this).scrollTop();
  console.log(scr);
  $('th:first-child span, td:first-child span').css('transform', 'translateY(' + scr + 'px)');
})