JSFiddle - React, Tailwind, and code Playground

by Dai Duong

HTML

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<table>
  <thead>
    <tr>
      <th>Column 1</th>
      <th>Column 2</th>
      <th>Column 3</th>
      <th>Column 4</th>
      <th>Column 5</th>
      <th>Column 6</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Row 1</td>
      <td>Row 1</td>
      <td>Row 1</td>
      <td>Row 1</td>
      <td>Row 1</td>
      <td>Row 1</td>
    </tr>
    <tr>
      <td>Row 2</td>
      <td>Row 2</td>
      <td>Row 2</td>
      <td>Row 2</td>
      <td>Row 2</td>
      <td>Row 1</td>
    </tr>
    <tr>
      <td>Row 3</td>
      <td>Row 3</td>
      <td>Row 3</td>
      <td>Row 3</td>
      <td>Row 3</td>
      <td>Row 1</td>
    </tr>
    <tr>
      <td>Row 4</td>
      <td>Row 4</td>
      <td>Row 4</td>
      <td>Row 4</td>
      <td>Row 4</td>
      <td>Row 1</td>
    </tr>
    <tr>
      <td>Row 5</td>
      <td>Row 5</td>
      <td>Row 5</td>
      <td>Row 5</td>
      <td>Row 5</td>
      <td>Row 1</td>
    </tr>
    <tr>
      <td>Row 6</td>
      <td>Row 6</td>
      <td>Row 6</td>
      <td>Row 6</td>
      <td>Row 6</td>
      <td>Row 1</td>
    </tr>
    <tr>
      <td>Row 1</td>
      <td>Row 1</td>
      <td>Row 1</td>
      <td>Row 1</td>
      <td>Row 1</td>
      <td>Row 1</td>
    </tr>
    <tr>
      <td>Row 2</td>
      <td>Row 2</td>
      <td>Row 2</td>
      <td>Row 2</td>
      <td>Row 2</td>
      <td>Row 1</td>
    </tr>
    <tr>
      <td>Row 3</td>
      <td>Row 3</td>
      <td>Row 3</td>
      <td>Row 3</td>
      <td>Row 3</td>
      <td>Row 1</td>
    </tr>
    <tr>
      <td>Row 4</td>
      <td>Row 4</td>
      <td>Row 4</td>
      <td>Row 4</td>
      <td>Row 4</td>
      <td>Row 1</td>
    </tr>
    <tr>
      <td>Row 5</td>
      <td>Row 5</td>
      <td>Row 5</td>
      <td>Row 5</td>
      <td>Row 5</td>
      <td>Row 1</td>
    </tr>
    <tr>
      <td>Row 6</td>
      <td>Row 6</td>
      <td>Row 6</td>
      <td>Row 6</td>
      <td>Row 6</td>
      <td>Row 1</td>
...

CSS

html {
  font-family: verdana;
  font-size: 10pt;
  line-height: 25px;
}
table {
  border-collapse: collapse;
  width: 735px;
  overflow-x: scroll;
  display: block;
}
thead {
  background-color: rgba(141, 159, 189, 0.34);
}
thead, tbody {
  display: block;
}
tbody {
  overflow-y: scroll;
  overflow-x: hidden;
  height: 325px;
}
td, th {
  min-width: 100px;
  height: 25px;
  border: solid 1px rgba(141, 159, 189, 0.34);
}
td:nth-child(6),th:nth-child(6){
  min-width: 230px;
}
td:nth-child(5),th:nth-child(5){
  min-width: 150px;
}
td:nth-child(3),th:nth-child(3){
  min-width: 220px;
}
td:nth-child(2),th:nth-child(2){
  min-width: 270px;
}
td:nth-child(1),th:nth-child(1){
  min-width: 170px;
}

JavaScript

$('table').on('scroll', function() {
  $("table > *").width($("table").width() + $("table").scrollLeft());
});
$("tbody").hover(
  function() {
    $(this).css("overflow-y", "scroll");
  },
  function() {
    $(this).css("overflow-y", "hidden");
  }
);