JSFiddle - React, Tailwind, and code Playground

by knightgao

HTML

<div class="headerWrapper wrapper" id="headerWrapper">
  <table>
    <colgroup>
      <col width="180">
      <col width="180">
      <col width="200">
      <col width="200">
    </colgroup>
    <thead>
      <tr>
        <th>凉</th>
        <th>风</th>
        <th>有</th>
        <th>信</th>
      </tr>
    </thead>
  </table>

</div>
<div class="bodyWrapper wrapper" id="bodyWrapper">
  <table>
    <colgroup>
      <col width="180">
      <col width="180">
      <col width="200">
      <col width="200">
    </colgroup>
    <tbody>
      <tr>
        <td>凉风有信</td>
        <td>秋月无边</td>
        <td>亏我思娇情绪好比度日如年</td>
        <td>恨天各一方难与秋娟再相见</td>
      </tr>
    </tbody>
  </table>

</div>

CSS

.wrapper {
  width: 300px;
  overflow: auto;
}

.wrapper>table {
  width: 800px;

}

.headerWrapper {
  overflow: hidden;
}

JavaScript

function ready() {

  const headerWrapper = document.getElementById("headerWrapper");
  const bodyWrapper = document.getElementById("bodyWrapper");

  bodyWrapper.addEventListener('scroll', function() {
    window.requestAnimationFrame(() => {
      let top = this.scrollTop
      let left = this.scrollLeft
      headerWrapper.scrollTo(left, top);
    })
  }, {
    passive: true
  })

}

document.addEventListener("DOMContentLoaded", ready);