JSFiddle - React, Tailwind, and code Playground

by Luiz Vargas

HTML

<div id="container">

<table id="tbl" border>
<thead>
<tr>
<th>Name</th>
<th>Major</th>
<th>Sex</th>
<th>English</th>
<th>Japanese</th>
<th>Calculus</th>
<th>Geometry</th>
</tr>
</thead>

<tbody>

  <tr>
    <td>Student01</td>
    <td>Languages</td>
    <td>male</td>
    <td>80</td>
    <td>70</td>
    <td>75</td>
    <td>80</td>

  </tr>
  <tr>
    <td>Student02</td>
    <td>Mathematics</td>
    <td>male</td>
    <td>90</td>
    <td>88</td>
    <td>100</td>
    <td>90</td>

  </tr>
  <tr>
    <td>Student03</td>
    <td>Languages</td>
    <td>female</td>
    <td>85</td>
    <td>95</td>
    <td>80</td>
    <td>85</td>

  </tr>
  <tr>
    <td>Student04</td>
    <td>Languages</td>
    <td>male</td>
    <td>60</td>
    <td>55</td>
    <td>100</td>
    <td>100</td>

  </tr>
  <tr>
    <td>Student05</td>
    <td>Languages</td>
    <td>female</td>
    <td>68</td>
    <td>80</td>
    <td>95</td>
    <td>80</td>

  </tr>
  <tr>
    <td>Student06</td>
    <td>Mathematics</td>
    <td>male</td>
    <td>100</td>
    <td>99</td>
    <td>100</td>
    <td>90</td>

  </tr>
  <tr>
    <td>Student07</td>
    <td>Mathematics</td>
    <td>male</td>
    <td>85</td>
    <td>68</td>
    <td>90</td>
    <td>90</td>

  </tr>
  <tr>
    <td>Student08</td>
    <td>Languages</td>
    <td>male</td>
    <td>100</td>
    <td>90</td>
    <td>90</td>
    <td>85</td>

  </tr>
  <tr>
    <td>Student09</td>
    <td>Mathematics</td>
    <td>male</td>
    <td>80</td>
    <td>50</td>
    <td>65</td>
    <td>75</td>

  </tr>
  <tr>
    <td>Student10</td>
    <td>Languages</td>
    <td>male</td>
    <td>85</td>
    <td>100</td>
    <td>100</td>
    <td>90</td>

  </tr>
  <tr>
    <td>Student11</td>
    <td>Languages</td>
    <td>male</td>
    <td>86</td>
    <td>85</td>
    <td>100</td>
    <td>100</td>

  </tr>
  <tr>
    <td>Student12</td>
    <td>Mathematics</td>
    <td>female</td>
    <td>100</td>
    <td>75</td>
    <td>70</td>
    <td>85</td>

  </tr>
  <tr>
    <td>Student13</td>
   ...

CSS

* { font: normal 14px arial }
    #container { width: 300px; height: 300px; overflow: auto; position: relative; }
    #container table { border-collapse: collapse; table-layout: fixed; background: #eee } 
    #container td { padding: 3px 6px }
    .lock { position: absolute; top: 0; left: 0; background: red none !Important; z-index: 10 }

JavaScript

var colsToLock = 1;

var tbl = $("#tbl").clone();
tbl.find("td:nth-child(1n+" + (colsToLock + 1) + "), th:nth-child(1n+" + (colsToLock + 1) + ")").remove();
tbl.addClass("lock");
$("#container").append(tbl);
$("#container").scroll(function () { $("#container").find(".lock").css("left", $("#container").scrollLeft()); });