JSFiddle - React, Tailwind, and code Playground

by Tarafder Ashek E Elahi

HTML

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<br>
<br>
<div class="container">
  <div class="content">
    <table id="main">
      <thead>
        <tr></tr>
      </thead>
      <tbody></tbody>
    </table>
  </div>
</div>

CSS

table {
  border-collapse: collapse;
  table-layout: fixed;
}

th,
td {
  border: 1px solid #ccc;
  padding: 3px 5px;
}

th {
  background: blue;
  color: #fff;
}

.container {
  width: 500px;
  height: 300px;
  position: relative;
  overflow: hidden;
}

.content {
  overflow: auto;
  height: inherit;
  width: inherit;
}

.header-table-container {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  width: 482px;
  height: 26px;
}

.header-table {
  position: absolute;
  top: 0px;
  left: 0;
  z-index: 3;
}

.left-table-container {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  width: 482px;
  height: 283px;
}

.left-table {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
}

JavaScript

$(function() {
  function gr() {
    var min = 1;
    var max = 9999999;
    return Math.floor(Math.random() * (max - min)) + min;
  }
  var cols = 20;
  var rows = 50;
  for (var i = 0; i < cols; i++) {
    $("table thead tr").append('<th>' + gr() + '</th>');
  }
  var $tBody = $("table tbody");
  for (var i = 0; i < rows; i++) {
    var $tr = $("<tr></tr>");
    for (var j = 0; j < cols; j++) {
      if (j == 0) {
        $tr.append('<th>' + gr() + '</th>');
      } else {
        $tr.append('<td>' + gr() + '</td>');
      }
    }
    $tBody.append($tr);
  }
  ///////////////////////////////
  var $mainTable = $("#main");
  var $headerTable = $mainTable.clone().attr("id", "");
  $headerTable.addClass("header-table").find("tbody").remove();
  var mainThs = $mainTable.find("thead th");
  $headerTable.find("thead th").each(function() {
    var origTh = $(mainThs[$(this).index()]);
    console.log(origTh.length);
    if (origTh.length) {
      $(this).width(origTh.width());
    }
  })
  $headerTable.width($mainTable.width());
  $('<div class="header-table-container"/>').insertAfter($mainTable).append($headerTable);
  //$mainTable.after($headerTable);

  var $leftTable = $mainTable.clone().attr("id", "");
  $leftTable.addClass("left-table");
  $leftTable.find("tr").each(function() {
    $(this).find("th, td").filter(':gt(0)').remove();
  });
  $('<div class="left-table-container"/>').insertAfter($mainTable).append($leftTable);
  //$mainTable.after($leftTable);

  $(".content").scroll(function() {
    $(".header-table").css("left", -1 * $(this).scrollLeft());
    $(".left-table").css("top", -1 * $(this).scrollTop());
  })

})