JSFiddle - React, Tailwind, and code Playground

by meatHucker

HTML

<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<body>
  <div class="container">
    <h1>Table Fixed Header</h1>
    <table id="mytable" class="table table-bordered table-striped table-fixed-header">
      <thead class="header">
        <tr>
          <th>Column 1</th>
          <th>Column 2</th>
          <th>Column 3</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Data Column 1</td>
          <td>Data Column 2</td>
          <td>Data Column 3</td>
        </tr>
      </tbody>
    </table>
    <h1>Another table</h1>
    <table id="mytable2" class="table table-bordered table-striped table-fixed-header">
      <thead class="header">
        <tr style="color:#00f;">
          <th>Column 11</th>
          <th>Column 22</th>
          <th>Column 33</th>
          <th>Column 44</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Data Column 11</td>
          <td>Data Column 22</td>
          <td>Data Column 33</td>
          <td>Data Column 44</td>
        </tr>
      </tbody>
    </table>
  </div>

 
</html>

CSS

#mynav {
        top: 0;
        position: fixed;
        left: 0;
        right: 0;
        margin: 0 auto;
        z-index: 1030;
        height:40px;
        color:#fff;
        background-color:#666;
        text-align: center;
      }
      body { padding-top:60px; }
table .header-fixed {
  position: fixed;
  top: 40px;
  z-index: 1020; /* 10 less than .navbar-fixed to prevent any overlap */
  border-bottom: 1px solid #d5d5d5;
  -webkit-border-radius: 0;
     -moz-border-radius: 0;
          border-radius: 0;
  -webkit-box-shadow: inset 0 1px 0 #fff, 0 1px 5px rgba(0,0,0,.1);
     -moz-box-shadow: inset 0 1px 0 #fff, 0 1px 5px rgba(0,0,0,.1);
          box-shadow: inset 0 1px 0 #fff, 0 1px 5px rgba(0,0,0,.1);
  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false); /* IE6-9 */
}

JavaScript

(function($) {
 
$.fn.fixedHeader = function (options) {
 var config = {
   topOffset: 40,
   bgColor: '#EEEEEE'
 };
 if (options){ $.extend(config, options); }
 
 return this.each( function() {
  var o = $(this);
 
  var $win = $(window)
    , $head = $('thead.header', o)
    , isFixed = 0;
  var headTop = $head.length && $head.offset().top - config.topOffset;
 
  function processScroll() {
    if (!o.is(':visible')) return;
    var i, scrollTop = $win.scrollTop();
    var t = $head.length && $head.offset().top - config.topOffset;
    if (!isFixed && headTop != t) { headTop = t; }
    if      (scrollTop >= headTop && !isFixed) { isFixed = 1; }
    else if (scrollTop <= headTop && isFixed) { isFixed = 0; }
    isFixed ? $('thead.header-copy', o).removeClass('hide')
            : $('thead.header-copy', o).addClass('hide');
  }
  $win.on('scroll', processScroll);
 
  // hack sad times - holdover until rewrite for 2.1
  $head.on('click', function () {
    if (!isFixed) setTimeout(function () {  $win.scrollTop($win.scrollTop() - 47) }, 10);
  })
 
  $head.clone().removeClass('header').addClass('header-copy header-fixed').appendTo(o);
  var ww = [];
  o.find('thead.header > tr:first > th').each(function (i, h){
    ww.push($(h).width());
  });
  $.each(ww, function (i, w){
    o.find('thead.header > tr > th:eq('+i+'), thead.header-copy > tr > th:eq('+i+')').css({width: w});
  });
 
  o.find('thead.header-copy').css({ margin:'0 auto',
                                    width: o.width(),
                                   'background-color':config.bgColor });
  processScroll();
 });
};
 
})(jQuery);
$(document).ready(function(){
      // add 30 more rows to the table
      var row = $('table#mytable > tbody > tr:first');
      var row2 = $('table#mytable2 > tbody > tr:first');
      for (i=0; i<30; i++) {
        $('table#mytable > tbody').append(row.clone());
        $('table#mytable2 > tbody').append(row2.clone());
      }
 
      // make the header fixed on scroll
 ...