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'>
     <h2 id='mynav'>TOP BAR</h2>

     <h1>Table Fixed Header</h1>

    <table class='table table-bordered table-fixed-header'>
        <thead class='header'>
            <tr>
                <th colspan='1' rowspan='2'>A title</th>
                <th colspan='3' rowspan='1'>A big title</th>
                <th colspan='1' rowspan='2'>Comment</th>
            </tr>
            <tr>
                <th colspan='1' rowspan='1'>Sub1</th>
                <th colspan='1' rowspan='1'>Sub2</th>
                <th colspan='1' rowspan='1'>Sub3</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Val1</td>
                <td>Val2</td>
                <td>Val3</td>
                <td>Val4</td>
                <td>Val5</td>
            </tr>
            <tr>
                <td colspan='1' rowspan='2'>Bigval</td>
                <td>Some1</td>
                <td>Some1</td>
                <td>Some1</td>
                <td colspan='1' rowspan='2'>This is awesome</td>
            </tr>
            <tr>
                <td>Some2</td>
                <td>Some2</td>
                <td>Some2</td>
            </tr>
        </tbody>
    </table>
</div>

CSS

table .header-fixed {
    position: fixed;
    top: 40px;
    /*left: 0;*/
    /*right: 0;*/
    z-index: 1020;
    /* 10 less than .navbar-fixed to prevent any overlap */
    border-bottom: 1px solid #d5d5d5;
    border-radius: 0;
}
thead {
    background-color: #eaeaea;
}
tbody {
    background-color: #fcfcfc;
}
#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;
}

JavaScript

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

});

$(document).ready(function () {
    $('.table-fixed-header').fixedHeader();
});

(function($) {

$.fn.fixedHeader = function (options) {
 var config = {
   topOffset: 40
   //bgColor: 'white'
 };
 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;
    if ($('thead.header-copy').size())
    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 header_width = $head.width();
  o.find('thead.header-copy').width(header_width);
  o.find('thead.header > tr:first > th').each(function (i, h){
    var w = $(h).width();
    o.find('thead.header-copy> tr > th:eq('+i+')').width(w)
  });
  $head.css({ margin:'0 auto',
              width: o.width(),
             'background-color':config.bgColor });
  processScroll();
 });
};

})(jQuery);