JSFiddle - React, Tailwind, and code Playground

by Manju06

HTML

<head>
  <title>sample</title>
  <meta charset="utf-8" http-equiv="refresh" content="300">
  <link href="https://fonts.googleapis.com/css?family=Lato&display=block" rel="stylesheet">
  <link rel="stylesheet" type="text/css" href="css/style.css">
</head>

<body>
  <div class="container">
    <table class="checkBox">
      <thead>
        <tr>
        <th></th>
          <th>Name</th>
          <th>user1</th>
          <th>user2</th>
          <th>user3</th>
          <th>user4</th>
          <th>user5</th>
          <th>user6</th>
          <th>user7</th>
          <th>user8</th>
          <th>user9</th>
          <th>user10</th>
          <th>user11</th>
          <th>user12</th>
          <th>user13</th>
        </tr>
      </thead>
      <tbody>
        <tr id='row1'>
          <th span='col'>row1</th>
          <td id='user1'></td>
          <td id='user2'></td>
          <td id='user3'></td>
          <td id='user4'></td>
          <td id='user5'></td>
          <td id='user6'></td>
          <td id='user7'></td>
          <td id='user8'></td>
          <td id='user9'></td>
          <td id='user10'></td>
          <td id='user11'></td>
          <td id='user12'></td>
          <td id='user13'></td>
        </tr>
        <tr id='row2'>
          <th span='col'>row2</th>
          <td id='user1'></td>
          <td id='user2'></td>
          <td id='user3'></td>
          <td id='user4'></td>
          <td id='user5'></td>
          <td id='user6'></td>
          <td id='user7'></td>
          <td id='user8'></td>
          <td id='user9'></td>
          <td id='user10'></td>
          <td id='user11'></td>
          <td id='user12'></td>
          <td id='user13'></td>
        </tr>
        <tr id='row3'>
          <th span='col'>row3</th>
          <td id='user1'></td>
          <td id='user2'></td>
          <td id='user3'></td>
          <td id='user4'></td>
          <td id='user5'></td>
          <td id='user6'></td>
          <td id='user7'></td>
      ...

CSS

html {
  line-height: 1.5;
  font-family: Lato, sans-serif;
  font-weight: normal;
  font-size: 14px;
  color: #212121;
}

body {
  background: #fafafa;
  margin: 0px;
}

html,
body,
{
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.container {
  max-width: 1280px;
  width: 100%;
  position: relative;
  margin: 0 auto;
}

.checkBox {
  width: 100%;
  margin: 12px 0px;
  border: solid 1px #dcdcdc;
  border-radius: 4px;
  
}

.checkBox thead tr {
  background-color: #ddd;
}

.checkBox thead tr th {
  text-transform: uppercase;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 1px;
  text-align: left;
  color: #7a7a7a;
}

.checkBox tbody tr th {
  text-align: left;
  padding: 4px 12px;

}
th {
 
  position: sticky;
  top: 0;
 
}

.checkBox tbody tr {
  background: #fff;
}

.checkBox tbody tr:nth-child(even) {
  background: #f6f6f6;
}

.checkBox tbody tr td {
  padding: 0 8px;
}

JavaScript

$('.container').scroll(function(e) {
  var scrollLeft = $(".container").scrollLeft();
  //$('#prodTable thead').css("left", -tbodyScrollLeft);
  //$('#prodTable thead th:nth-child(1)').css("left", tbodyScrollLeft - 5); 
  //$('#prodTable tbody td:nth-child(1)').css("left", tbodyScrollLeft - 5); 
  $('.checkBox thead th:nth-child(1)').css("left", scrollLeft); 
  $('.checkBox tbody td:nth-child(1)').css("left", scrollLeft); 
  $('.checkBox thead th:nth-child(2)').css("left", scrollLeft);
  $('.checkBox tbody td:nth-child(2)').css("left", scrollLeft);
});