JSFiddle - React, Tailwind, and code Playground

by Glen Carrie

HTML

<div class="mega">
<div class="mega">
  <table class='header' width="2000" border="1">
  <thead><tr id="header1" class="fixedHeader"><th style="width:300px;"><br></th><th>2017-04-10<br>08:38<br>341149761<br>COMP<br></th><th>2017-04-06<br>15:20<br>341158452<br>COMP<br></th><th>2017-04-01<br>10:20<br>460949424<br>COMP<br></th><th>2016-10-19<br>07:55<br>341128150<br>COMP<br></th><th>2016-10-17<br>07:40<br>341124335<br>COMP<br></th><th>2016-10-15<br>20:10<br>341128505<br>COMP<br></th><th>2016-10-13<br>11:05<br>341128638<br>COMP<br></th><th>2015-09-30<br>07:55<br>341364727<br>COMP<br></th><th>2015-09-28<br>07:30<br>341359245<br>COMP<br></th><th>2015-09-22<br>09:35<br>341364050<br>COMP<br></th><th>2014-05-23<br>08:15<br>341299145<br>COMP<br></th><th>2013-10-07<br>09:30<br>341257904<br>COMP<br></th><th>2013-09-14<br>09:00<br>341257282<br>COMP<br></th><th>2013-09-12<br>14:40<br>341264167<br>COMP<br></th><th>2013-09-11<br>07:44<br>341249676<br>COMP<br></th><th>2013-09-09<br>17:50<br>341249648<br>COMP<br></th><th>2012-06-29<br>07:48<br>341208533<br>COMP<br></th><th>2012-06-25<br>15:35<br>341208433<br>COMP<br></th></tr></thead>
  </table>
  
  
 <table width="2000" border="1">
  <tbody><tr><td colspan="19" style="background-color: #f4faff;text-align:left;font-size:14px;font-weight:900;height:60px">Haematology</td></tr><tr id="header-group0"></tr><tr class="row-group0"><td class="testname">ESR (1 - 55 mm/hr)</td><td class="undefined">19</td><td class="undefined">23</td><td class="undefined"></td><td class="undefined">23</td><td class="undefined">24</td><td class="undefined"></td><td class="undefined">43</td><td class="H">85</td><td class="undefined"></td><td class="H">117</td><td class="undefined">38</td><td class="undefined">22</td><td class="undefined">6</td><td class="undefined"></td><td class="undefined">6</td><td class="undefined">18</td><td class="undefined"></td><td class="undefined"></td></tr><tr class="row-group0"><td class="testname">ESR (1 - 45 mm/hr)</td><td...

CSS

.mega {
    height: 500px;
    margin: 0px;
    overflow: auto;
    background: #eee;
    position:relative;
    
}
.header{position:absolute; background-color:rgb(202, 202, 202);}
.header+* {margin-top:30px;}
td.testname {width:300px;}
td,th {width:60px;}
table,body {font-size:11px;}

JavaScript

$('.mega').on('scroll',function(){$('.header').css('top',$(this).scrollTop());});