JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<body>
<div class="container">
 <div class="row">
     
      <div>xxxxxxxx</div>
  
    </div>
<div class="row fixme" style="position: static; top: 0px; left: 0px;">
     <div class="col-md-4">
      <div class="pull-right">
       <a class="btn btn-app">Apply Actions</a>
       <a class="btn btn-app">Download XLS</a>
      </div>
     </div>
    </div>
    
    <div class="row">
    <div class="mytable">
    
   
      <table class="countries-table">
        <thead>
          <tr>
            <td>Name</td><td>Value</td>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>aJohn</td><td>aThe Boy</td>
          </tr>
          <tr>
            <td>John</td><td>The Boy</td>
          </tr>
          <tr>
            <td>John</td><td>The Boy</td>
          </tr>
          <tr>
            <td>John</td><td>The Boy</td>
          </tr>
          <tr>
            <td>John</td><td>The Boy</td>
          </tr>
          <tr>
            <td>John</td><td>The Boy</td>
          </tr>
          <tr>
            <td>John</td><td>The Boy</td>
          </tr>
          <tr>
            <td>John</td><td>The Boy</td>
          </tr>
          <tr>
            <td>John</td><td>The Boy</td>
          </tr>
          <tr>
            <td>John</td><td>The Boy</td>
          </tr>
          <tr>
            <td>John</td><td>The Boy</td>
          </tr>
          <tr>
            <td>John</td><td>The Boy</td>
          </tr>
          <tr>
            <td>John</td><td>The Boy</td>
          </tr>
          <tr>
            <td>John</td><td>The Boy</td>
          </tr>
          <tr>
            <td>John</td><td>The Boy</td>
          </tr>
          <tr>
            <td>John</td><td>The Boy</td>
 ...

CSS

.fixme {
  width: 100%;
  margin-top: 0 !important;
  background-color: #000;
  z-index: 5000;
  margin-bottom: 20px;
}



.countries-table {
  width:382px;
  background-color: silver;
  table-layout:fixed;
}

.countries-table thead tr{
  font-weight: bold;
       display: block;
    position: relative;
    background:#333;
    color:#fff;
        width: 383px;
}
.countries-table tbody{
      display: block;
    overflow: auto;
    width: 100%;
    height: 300px;
}
.countries-table thead tr td:nth-child(1),
.countries-table tbody tr td:nth-child(1) {
  padding:4px;
  width:190px;
  }
  .countries-table thead tr td:nth-child(2),
.countries-table tbody tr td:nth-child(2) {
  padding:4px;
  width:190px;
  }

.countries-table tbody tr:nth-child(odd){
  background:#f5f5f5;
}

JavaScript

/*
$(document).ready(function() {

  var fixmeTop = $(".fixme").offset().top;
  var countriesTableTop = $(".fixme").height() + 20;
  $(window).scroll(function() {
    var currentScroll = $(window).scrollTop();
    if (currentScroll >= fixmeTop) {
      $(".fixme").css({"position": "fixed", "top": "0", "left": "0"});
      $(".countries-table").css({"position": "fixed", "top": countriesTableTop, "left": "0"});
    } else {
      $(".fixme").css("position", "static");
      $(".countries-table").css("position", "static");
    }
  });
});

*/