JSFiddle - React, Tailwind, and code Playground

by Russ Blanc

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<header class="header">Fixed Header - 140PX</header>

<div id="pure">

<h1>Table Fixed Header</h1>

<h2>At Bottom of Fixed Header</h2>
        
        <h2>&darr; SCROLL &darr;</h2>
        
        

<div class="container">

<table class="blue">
  <thead>
    <tr>
      <th>Colonne 1</th>
      <th>Colonne 2</th>
      <th>Colonne 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non asdf asdf asdfsad fsdf asdf sadfsad sdf adf sad sadfasd fsf</td>
      <td>Mais Non asdf asdf asdfsad fsdf asdf sadfsad sdf adf sad sadfasd fsf</td>
      <td>Allo Non asdf asdf asdfsad fsdf asdf sadfsad sdf adf sad sadfasd fsf</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
       <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo...

CSS

h1, h2 {
  text-align: center;
  text-transform: uppercase;
}

.container {
  width: 90%;
  margin: auto;
  overflow-x: auto; /* MUST KEEP */
}

table {
  border-collapse:collapse;
  width:100%;
}

.blue {
  border:2px solid #1ABC9C;
}

.blue thead {
  background:#1ABC9C;
}

.purple{
  border:2px solid #9B59B6;
}

.purple thead{
  background:#9B59B6;
}

thead {
  color:white;
}

th,td {
  text-align:center;
  padding:5px 0;
  white-space: nowrap; /* MUST KEEP */
}

tbody tr:nth-child(even) {
  background:#ECF0F1;
}

tbody tr:hover {
background:#BDC3C7;
  color:#FFFFFF;
}

.fixed {
  top:0px;
  position:fixed;
  width:auto;
  display:none;
  border-top:none;
  border-bottom:none;
}

.scrollMore {
  margin-top:10px;
}

.up {
  cursor:pointer;
}

.header {
    font: 13px Arial, Helvetica, sans-serif;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
    height: 140px;
    border: 1px solid #000;
    }
    
 #pure {
   margin-top:200px;
 }

JavaScript

;(function($) {
   $.fn.fixMe = function() {
      return this.each(function() {
         var $this = $(this),
            $t_fixed,
            $header_height = $('header').height();
         function init() {
            $this.wrap('<div class="container" />');
            $t_fixed = $this.clone();
            $t_fixed.find("tbody").remove().end().addClass("fixed").css({top: $header_height + "px"}).insertBefore($this);
            resizeFixed();
         }
         function resizeFixed() {
            $t_fixed.find("th").each(function(index) {
               $(this).css("width",$this.find("th").eq(index).outerWidth()+"px");
            });
         }
         function scrollFixed() {
            var offset = $(this).scrollTop(),
            tableOffsetTop = $this.offset().top,
            tableOffsetBottom = tableOffsetTop + $this.height() - $this.find("thead").height();
            if(offset + $header_height < tableOffsetTop || offset + $header_height > tableOffsetBottom)
               $t_fixed.hide();
            else if(offset + $header_height >= tableOffsetTop && offset + $header_height <= tableOffsetBottom && $t_fixed.is(":hidden"))
               $t_fixed.show();
         }
         $(window).resize(resizeFixed);
         $(window).scroll(scrollFixed);
         init();
      });
   };
})(jQuery);

$(document).ready(function(){
   $("table").fixMe();
   $(".up").click(function() {
      $('html, body').animate({
      scrollTop: 0
   }, 2000);
 });
});