JSFiddle - React, Tailwind, and code Playground

by dandiebolt

HTML

<table class="table table-bordered">
  <thead>
    <tr>
      <th>ID</th>
      <th>Tanggal</th>
      <th>Judul Pekerjaan</th>
      <th>Deskripsi</th>
      <th>Level</th>
      <th>Category</th>
      <th>Severity</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>1</td>
      <td>1 May 2017</td>
      <td>Satu</td>
      <td>Satu</td>
      <td>5</td>
      <td>Lorem</td>
      <td>Ipsum</td>
    </tr>
    <tr>
      <td>2</td>
      <td>2 May 2017</td>
      <td>Dua</td>
      <td>Dua</td>
    </tr>
    <tr>
      <td>3</td>
      <td>3 May 2017</td>
      <td>Tiga</td>
      <td>Tiga</td>
    </tr>
    <tr>
      <td>3</td>
      <td>3 May 2017</td>
      <td>Tiga</td>
      <td>Tiga</td>
    </tr>
    <tr>
      <td>2</td>
      <td>2 May 2017</td>
      <td>Dua</td>
      <td>Dua</td>
    </tr>
    <tr>
      <td>3</td>
      <td>3 May 2017</td>
      <td>Tiga</td>
      <td>Tiga</td>
    </tr>
    <tr>
      <td>3</td>
      <td>3 May 2017</td>
      <td>Tiga</td>
      <td>Tiga</td>
    </tr>
  </tbody>
</table>

CSS

body {
  margin: 0;
}
th, td {
    text-align: center;
    background-color: white
}
table {
  position: relative;
  width: 400px;
  overflow: hidden;
}
thead {
  position: relative;
  display: block;
  width: 400px;
  overflow: visible;
}
thead th {
  min-width: 80px;
  height: 40px;
}
thead th:nth-child(1) {
  position: relative;
  display: block;
  height: 40px;
  padding-top: 20px;
}
tbody {
  position: relative;
  display: block;
  width: 400px;
  height: 90px;
  overflow: scroll;
}
tbody td {
  min-width: 80px;
}
tbody tr td:nth-child(1) {
  position: relative;
  display: block;
}

JavaScript

$('tbody').scroll(function(e) { 
    $('thead').css("left", -$("tbody").scrollLeft());
    $('thead th:nth-child(1)').css("left", $("tbody").scrollLeft()-5); 
    $('tbody td:nth-child(1)').css("left", $("tbody").scrollLeft()-5); 
  });