JSFiddle - React, Tailwind, and code Playground

by Jihad Dzikri Waspada

HTML

<body>
  <div id="app">
    <table>
      <thead>
        <tr>
          <th class="fixed">Name</th>
          <th class="fixed">Town</th>
          <th>County</th>
          <th>Age</th>
          <th>Profession</th>
          <th>Anual Income</th>
          <th>Matital Status</th>
          <th>Children</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td class="fixed">John Smith</td>
          <td class="fixed">Macelsfield</td>
          <td>Cheshire</td>
          <td>52</td>
          <td>Brewer</td>
          <td>£47,000</td>
          <td>Married</td>
          <td>2</td>
        </tr>
        <tr>
          <td class="fixed">Jenny Jones</td>
          <td class="fixed">Threlkeld</td>
          <td>Cumbria</td>
          <td>34</td>
          <td>Shepherdess</td>
          <td>£28,000</td>
          <td>Single</td>
          <td>0</td>
        </tr>
        <tr>
          <td class="fixed">Peter Frampton</td>
          <td class="fixed">Avebury</td>
          <td>Wiltshire</td>
          <td>57</td>
          <td>Musician</td>
          <td>£124,000</td>
          <td>Married</td>
          <td>4</td>
        </tr>
        <tr>
          <td class="fixed">Simon King</td>
          <td class="fixed">Malvern</td>
          <td>Worchestershire</td>
          <td>48</td>
          <td>Naturalist</td>
          <td>£65,000</td>
          <td>Married</td>
          <td>2</td>
        </tr>
        <tr>
          <td class="fixed">Lucy Diamond</td>
          <td class="fixed">St Albans</td>
          <td>Hertfordshire</td>
          <td>67</td>
          <td>Pharmasist</td>
          <td>Retired</td>
          <td>Married</td>
          <td>3</td>
        </tr>
        <tr>
          <td class="fixed">Austin Stevenson</td>
          <td class="fixed">Edinburgh</td>
          <td>Lothian </td>
          <td>36</td>
          <td>Vigilante</td>
          <td>£86,000</td>
          <td>Single</td>
          <td>Unknown</td>
        </tr>
      ...

SCSS

#app {
  overflow: auto;
  background: white;
  width: 500px;
  height: 250px;
}

table {
  width: 100%;
  height: 100px;
  border-collapse: collapse;
  transform-style: preserve-3d;
}

thead {
  color: red;
  position: relative;
}

th {
  text-align: left;
  padding: 6px;
}

td, th {
  min-width: 100px;
  padding: 5px;
  background: white;
}

Babel + JSX

document.getElementById('app').addEventListener('scroll', function onTableScrolled() {
	// Fixed headers
  const translateX = `translateY(${this.scrollTop}px) translateZ(1px)`;
  this.querySelector('thead').style.transform = translateX;
  
  // Fixed Column
  const scrollLeft = this.scrollLeft;
  this.querySelectorAll('.fixed').forEach(col => {
  	col.style.transform = `translateX(${scrollLeft}px)`;
  })
});