JSFiddle - React, Tailwind, and code Playground

by Glen Carrie

HTML

<script src="https://fonts.googleapis.com/css?family=Roboto:300,400,500,900"></script>
  <div class="mega">
    <table class='header' width="2000">
      <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
           ...

CSS

.mega {
  height: 500px;
  margin: 0px;
  overflow: auto;
  position: relative;
}

.header {
  position: absolute;
  background-color: #efefef;
}

.header th {background-color:#c6c6c6;}

.header+* {
  margin-top: 60px;
}

td.testname {
  width: 300px;
  text-align:left;
  background-color:#efefef;
}

td,
th {
  text-align:center;
  width: 60px;
  background-color:#fff;
}

table,
body {
   font-family: 'Roboto', sans-serif;
   font-size:11px;
}

JavaScript

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