JSFiddle - React, Tailwind, and code Playground

by Sampath_Madhuranga

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<table>
    <thead>
      <tr>
        <th>Name</th>
        <th>Town</th>
        <th>County</th>
        <th>Age</th>
        <th>Profession</th>
        <th>Anual Income</th>
        <th>Matital Status</th>
        <th>Children</th>
		<th>Anual Income</th>
        <th>Matital Status</th>
        <th>Children</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John Smith</td>
        <td>Macelsfield</td>
        <td>Cheshire</td>
        <td>52</td>
        <td>Brewer</td>
        <td>£47,000</td>
        <td>Married</td>
        <td>2</td>
		<td>£47,000</td>
        <td>Married</td>
        <td>2</td>
      </tr>
      <tr>
        <td>Jenny Jones</td>
        <td>Threlkeld</td>
        <td>Cumbria</td>
        <td>34</td>
        <td>Shepherdess</td>
        <td>£28,000</td>
        <td>Single</td>
        <td>0</td>
		<td>£47,000</td>
        <td>Married</td>
        <td>2</td>
      </tr>
      <tr>
        <td>Peter Frampton</td>
        <td>Avebury</td>
        <td>Wiltshire</td>
        <td>57</td>
        <td>Musician</td>
        <td>£124,000</td>
        <td>Married</td>
        <td>4</td>
		<td>£47,000</td>
        <td>Married</td>
        <td>2</td>
      </tr>
      <tr>
        <td>Simon King</td>
        <td>Malvern</td>
        <td>Worchestershire Wor chester shire</td>
        <td>48</td>
        <td>Naturalist</td>
        <td>£65,000</td>
        <td>Married</td>
        <td>2</td>
		<td>£47,000</td>
        <td>Married</td>
        <td>2</td>
      </tr>
      <tr>
        <td>Lucy Diamond</td>
        <td>St Albans</td>
        <td>Hertfordshire</td>
        <td>67</td>
        <td>Pharmasist</td>
        <td>Retired</td>
        <td>Married</td>
        <td>3</td>
		<td>£47,000</td>
       ...

CSS

table {
  position: relative;
  table-layout: auto;
  background-color: #aaa;
  overflow: hidden;
  border-collapse: collapse;
  display:block;
  width: 100%;
}


/*thead*/
thead {
  position: relative;
  display: block; /*seperates the header from the body allowing it to be positioned*/
  overflow: visible;
}

thead th {
  background-color: #99a;
  min-width: 120px;
  height: 32px;
  border: 1px solid #222;
  max-width:120px;
}

thead th:nth-child(1) {/*first cell in the header*/
  position: relative;
  background-color: #88b;
}

thead th:nth-child(2) {/*second cell in the header*/
  position: relative;
  background-color: #88b;
}

thead th:nth-child(3) {/*third cell in the header*/
  position: relative;
  background-color: #88b;
}

thead th:nth-child(4) {/*third cell in the header*/
  position: relative;
  background-color: #88b;
}

/*tbody*/
tbody {
  position: relative;
  display: block; /*seperates the tbody from the header*/
  height: 239px;
  overflow: scroll;
}

tbody td {
  background-color: #bbc;
  min-width: 120px;
  border: 1px solid #222;
  max-width:120px;
}

tbody tr td:nth-child(1) {  /*the first cell in each tr*/
  position: relative;
  height: 40px;
  background-color: #99a;
}

tbody tr td:nth-child(2) {  /*the second cell in each tr*/
  position: relative;
  height: 40px;
  background-color: #99a;
}

tbody tr td:nth-child(3) {  /*the third cell in each tr*/
  position: relative;
  height: 40px;
  background-color: #99a;
}

tbody tr td:nth-child(4) {  /*the third cell in each tr*/
  position: relative;
  height: 40px;
  background-color: #99a;
}

JavaScript

down vote
$(document).ready(function() {
  $('tbody').scroll(function(e) { //detect a scroll event on the tbody
  	/*
    Setting the thead left value to the negative valule of tbody.scrollLeft will make it track the movement
    of the tbody element. Setting an elements left value to that of the tbody.scrollLeft left makes it maintain 			it's relative position at the left of the table.    
    */
    $('thead').css("left", -$("tbody").scrollLeft()); //fix the thead relative to the body scrolling
    $('thead th:nth-child(1)').css("left", $("tbody").scrollLeft()); //fix the first cell of the header
    $('tbody td:nth-child(1)').css("left", $("tbody").scrollLeft()); //fix the first column of tdbody
	$('thead th:nth-child(2)').css("left", $("tbody").scrollLeft()); //fix the second cell of the header
    $('tbody td:nth-child(2)').css("left", $("tbody").scrollLeft()); //fix the second column of tdbody
	$('thead th:nth-child(3)').css("left", $("tbody").scrollLeft()); //fix the third cell of the header
	 $('tbody td:nth-child(3)').css("left", $("tbody").scrollLeft()); //fix the third column of tdbody
	 $('thead th:nth-child(4)').css("left", $("tbody").scrollLeft()); //fix the third cell of the header
	 $('tbody td:nth-child(4)').css("left", $("tbody").scrollLeft()); //fix the third column of tdbody
	
    
  });
});