JSFiddle - React, Tailwind, and code Playground

by secretgspot

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
  <div class="container">
    <div class="row">
      <h1>Table Fixed Header</h1>
    </div>
    <div class="row fixed-table">
      <div class="table-content">
        <table class="table table-striped table-fixed-header" id="mytable">
          <thead class="header">
            <tr>
              <th>Email Address</th>
              <th>First Name</th>
              <th>Last Name</th>
              <th>Administrator</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>#1 [email protected]</td>
              <td>firstname</td>
              <td>LastName</td>
              <td>Data Column 4</td>
            </tr>
            <tr>
              <td>#2 [email protected]</td>
              <td>firstname</td>
              <td>LastName</td>
              <td>Data Column 4</td>
            </tr>
            <tr>
              <td>#3 [email protected]</td>
              <td>firstname</td>
              <td>LastName</td>
              <td>Data Column 4</td>
            </tr>
            <tr>
              <td>[email protected]</td>
              <td>firstname</td>
              <td>LastName</td>
              <td>Data Column 4</td>
            </tr>
            <tr>
              <td>[email protected]</td>
              <td>firstname</td>
              <td>LastName</td>
              <td>Data Column 4</td>
            </tr>
            <tr>
              <td>[email protected]</td>
              <td>firstname</td>
              <td>LastName</td>
              <td>Data Column 4</td>
            </tr>
            <tr>
              <td>[email protected]</td>
              <td>firstname</td>
              <td>LastName</td>
              <td>Data Column 4</td>
            </tr>
            <tr>
              <td>[email protected]</td>
              <td>firstname</td>
              <td>LastName</td>
             ...

CSS

.fixed-table .header-fixed {
  position: absolute;
  top: 0px;
  z-index: 1020; /* 10 less than .navbar-fixed to prevent any overlap */
  border-bottom: 2px solid #d5d5d5;
  -webkit-border-radius: 0;
     -moz-border-radius: 0;
          border-radius: 0;
}
.fixed-table{
  display:block;
  position:relative;
}
.fixed-table th{
  padding: 8px;
  line-height: 18px;
  text-align: left;
}
.fixed-table .table-content{
  display:block;
  position: relative;
  height: 500px; /*FIX THE HEIGHT YOU NEED*/
  overflow-y: auto;
}
.fixed-table .header-copy{
  position:absolute;
  top:0;
  left:0;
}
.fixed-table .header-copy th{
  background-color:#fff;
}

JavaScript

$(document).ready(function(){
    // add 30 more rows to the table
    var row = $('table#mytable > tbody > tr:first');
    for (i=0; i<30; i++) {
        $('table#mytable > tbody').append(row.clone());
    }
    
    // make the header fixed on scroll
    $('.table-fixed-header').fixedHeader();
});

(function($) {
 
  $.fn.fixedHeader = function () {
 
    return this.each( function() {
      var o = $(this)
        , nhead = o.closest('.fixed-table');
 
      var $head = $('thead.header', o);
      
      $head.clone().removeClass('header').addClass('header-copy header-fixed').appendTo(nhead);
      var ww = [];
 
      o.find('thead.header > tr:first > th').each(function (i, h){
        ww.push($(h).width());
      });
 
      $.each(ww, function (i, w){
          nhead.find('thead.header > tr > th:eq('+i+'), thead.header-copy > tr > th:eq('+i+')').css({width: w});
      });
 
      nhead.find('thead.header-copy').css({ margin:'0 auto',
                                      width: o.width()});
 
      // makes the header scroll horziontally with the table if 
      // the table is too wide to fit into the surrounding div
      o.closest('.table-content').scroll(function(){
        var scroll = $(this).scrollLeft();
        nhead.find('thead.header-copy').css('margin-left', -scroll);
      });
 
    });
  };
 
})(jQuery);