Fixed Header Table Scrolling

by Scott Guymer

HTML

<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>
          <tr>
          <th colspan="2">Column 1 + 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> 
</body>

CSS

table .header-fixed {
  position: fixed;
  top: 0px;
  z-index: 1020;
  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 */
}
      #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

(function($){$.fn.fixheadertable=function(options){var defaults={caption:'',showhide:true,theme:'ui',height:null,width:null,minWidth:null,minWidthAuto:false,colratio:[],whiteSpace:'nowrap',addTitles:false,zebra:false,zebraClass:'ui-state-active',sortable:false,sortedColId:null,sortType:[],dateFormat:'d-m-y',pager:false,rowsPerPage:10,resizeCol:false,minColWidth:100,wrapper:true};var options=$.extend(defaults,options);function util_getComputedStyle(element,property){if(element.currentStyle){var y=x.currentStyle[property];}else if(window.getComputedStyle){var y=document.defaultView.getComputedStyle(element,null).getPropertyValue(property);}
return y;}
function util_getScrollbarWidth(){var inner=$('<p/>').addClass('t_fixed_header_scroll_inner');var outer=$('<div/>').addClass('t_fixed_header_scroll_outer');outer.append(inner);$(document.body).append(outer);var w1=inner[0].offsetWidth;outer.css('overflow','scroll');var w2=inner[0].offsetWidth;if(w1==w2)w2=outer[0].clientWidth;outer.remove();return(w1-w2);}
function util_parseDate(format,date){var tsp={m:1,d:1,y:1970,h:0,i:0,s:0},k,hl,dM;if(date&&date!==null&&date!==undefined){date=$.trim(date);date=date.split(/[\\\/:_;.\t\T\s-]/);format=format.split(/[\\\/:_;.\t\T\s-]/);var dfmt=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec","January","February","March","April","May","June","July","August","September","October","November","December"];var afmt=["am","pm","AM","PM"];var h12to24=function(ampm,h){if(ampm===0){if(h==12){h=0;}}
else{if(h!=12){h+=12;}}
return...