JSFiddle - React, Tailwind, and code Playground

HTML

<html>

  <body>
    <main>
      <section>
        <table id="respond" class='table table-responsive sticky-top responsive-header'>
          <thead class="thead-dark">
            <tr>
              <th class="sticky-top">sticky</th>
              <th class="sticky-top">sticky</th>
              <th class="sticky-top">sticky</th>
              <th class="sticky-top">sticky</th>
              <th class="sticky-top">sticky</th>
              <th class="sticky-top">sticky</th>
            </tr>
          </thead>
        </table>
        <table class='table table-responsive'>


          <thead class="thead-dark">
            <tr>
              <th class="sticky-top">sticky</th>
              <th class="sticky-top">sticky</th>
              <th class="sticky-top">sticky</th>
              <th class="sticky-top">sticky</th>
              <th class="sticky-top">sticky</th>
              <th class="sticky-top">sticky</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>test</td>
            </tr>
            <tr>
              <td>test</td>
            </tr>
            <tr>
              <td>test</td>
            </tr>
            <tr>
              <td>test</td>
            </tr>
            <tr>
              <td>test</td>
            </tr>
            <tr>
              <td>test</td>
            </tr>
            <tr>
              <td>test</td>
            </tr>
            <tr>
              <td>test</td>
            </tr>
            <tr>
              <td>test</td>
            </tr>
            <tr>
              <td>test</td>
            </tr>
            <tr>
              <td>test</td>
            </tr>
            <tr>
              <td>test</td>
            </tr>
            <tr>
              <td>test</td>
            </tr>
            <tr>
              <td>test</td>
            </tr>
            <tr>
              <td>test</td>
            </tr>
            <tr>
              <td>test</td>
            </tr>
  ...

CSS

.table {
  width: 100%;
  margin-bottom: 1rem;
  color: #212529;
}

.table .thead-dark th {
  color: #fff;
  background-color: #343a40;
  border-color: #454d55;
}

.table-responsive {
  display: block;
  width: 100%;
  overflow-x: auto;
}

.sticky-top {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1020;
}

.responsive-header {
  display: none;
}

JavaScript

function debounce(func, wait, immediate) {

  var timeout;

  return function() {

    var context = this,
      args = arguments;

    var later = function() {
      timeout = null;

      if (!immediate) func.apply(context, args);

    };

    var callNow = immediate && !timeout;
    clearTimeout(timeout);
    timeout = setTimeout(later, wait);

    if (callNow) func.apply(context, args);

  };

}

const storeScroll = () => {
  document.documentElement.dataset.scroll = window.scrollY;
  if (window.scrollY >= 10) $('#respond').removeClass('responsive-header');
  else $('#respond').addClass('responsive-header');
}
document.addEventListener('scroll', debounce(storeScroll), {
  passive: true
});
// Update scroll position for first time                                                                                                                                                    @
storeScroll();