Фиксированный заголовок таблицы Footable (плагин Jquery)

.sticky { 
  position: sticky; 
  top: 0; 
  min-height: 2em; 
  background: lightpink; 
} 
 
.raz { 
  border: 1px solid red; 
  max-height: 400px; 
  display: flex; 
  /* This is a (hacky) way to make the .grid element size to fit its content */ 
  overflow: auto; 
}

<div class="raz"> 
  <table class="table" id="maintable"> 
 
    <thead> 
 
      <tr class="sticky"> 
        <th data-breakpoints="xs">ID</th> 
        <th>First Name</th> 
        <th>Last Name</th> 
        <th data-breakpoints="xs">Job Title</th> 
        <th data-breakpoints="xs sm">Started On</th> 
        <th data-breakpoints="xs sm md" data-title="DOB">Date of Birth</th> 
      </tr> 
 
    </thead> 
 
    <tbody> 
      <tr data-expanded="true"> 
        <td>1</td> 
        <td>Dennise</td> 
        <td>Fuhrman</td> 
        <td>High School History Teacher</td> 
        <td>November 8th 2011</td> 
        <td>July 25th 1960</td> 
      </tr> 
      <tr> 
        <td>2</td> 
        <td>Elodia</td> 
        <td>Weisz</td> 
        <td>Wallpaperer Helper</td> 
        <td>October 15th 2010</td> 
        <td>March 30th 1982</td> 
      </tr> 
      <tr> 
        <td>3</td> 
        <td>Raeann</td> 
        <td>Haner</td> 
        <td>Internal Medicine Nurse Practitioner</td> 
        <td>November 28th 2013</td> 
        <td>February 26th 1966</td> 
      </tr> 
      <tr> 
        <td>4</td> 
        <td>Junie</td> 
        <td>Landa</td> 
        <td>Offbearer</td> 
        <td>October 31st 2010</td> 
        <td>March 29th 1966</td> 
      </tr> 
      <tr> 
        <td>5</td> 
        <td>Solomon</td> 
        <td>Bittinger</td> 
        <td>Roller Skater</td> 
        <td>December 29th 2011</td> 
        <td>September 22nd 1964</td> 
      </tr> 
      <tr> 
        <td>6</td> 
        <td>Bar</td> 
        <td>Lewis</td> 
        <td>Clown</td> 
        <td>November 12th 2012</td> 
        <td>August 4th 1991</td> 
      </tr> 
      <tr> 
        <td>7</td> 
        <td>Usha</td> 
        <td>Leak</td> 
        <td>Ships Electronic Warfare Officer</td> 
        <td>August 14th 2012</td> 
        <td>November 20th 1979</td> 
      </tr> 
      <tr> 
        <td>8</td> 
        <td>Lorriane</td> 
        <td>Cooke</td> 
        <td>Technical Services Librarian</td> 
        <td>September 21st 2010</td> 
        <td>April 7th 1969</td> 
      </tr> 
      <td>9</td> 
      <td>Dennise</td> 
      <td>Fuhrman</td> 
      <td>High School History Teacher</td> 
      <td>November 8th 2011</td> 
      <td>July 25th 1960</td> 
      </tr> 
      <tr> 
        <td>10</td> 
        <td>Elodia</td> 
        <td>Weisz</td> 
        <td>Wallpaperer Helper</td> 
        <td>October 15th 2010</td> 
        <td>March 30th 1982</td> 
      </tr> 
      <tr> 
        <td>11</td> 
        <td>Raeann</td> 
        <td>Haner</td> 
        <td>Internal Medicine Nurse Practitioner</td> 
        <td>November 28th 2013</td> 
        <td>February 26th 1966</td> 
      </tr> 
 
    </tbody> 
  </table> 
</div>] 
 
<script src="js/jquery-3.3.1.min.js"></script> 
<script src="js/footable.js"></script> 
<script type="text/javascript"> 
  jQuery(function($) { 
    $('.table').footable(); 
 
  }); 
</script> 
 
</body> 
 
</html>