JSFiddle - React, Tailwind, and code Playground

by Murali Kaliappan

HTML

<script src="https://www.jqueryscript.net/demo/jQuery-Plugin-For-Fixed-Table-Header-Footer-Columns-TableHeadFixer/tableHeadFixer.js"></script>
<table>
  <thead>
    <tr>
      <th>First Column</th><th>Second Column</th><th>Third Column</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>First</td><td>Second</td><td>Third</td> <td>Second</td><td>Third</td>
    </tr>
 <tr>
      <td>First</td><td>Second</td><td>Third</td> <td>Second</td><td>Third</td>
    </tr>
 <tr>
      <td>First</td><td>Second</td><td>Third</td> <td>Second</td><td>Third</td>
    </tr>
 <tr>
      <td>First</td><td>Second</td><td>Third</td> <td>Second</td><td>Third</td>
    </tr>

  </tbody>
</table>

CSS

table {
  width:1900px;  
}

td{
  padding:20px;  
  text-align:center;
  vertical-align:middle;
  border-bottom:1px solid lightgray;
}

JavaScript

$("table").tableHeadFixer({'head' : true});
$("table").tableHeadFixer({'left' : 1});