tHead Scroll

by zazvorniki

HTML

<div id="transactionIT" align="left" >


  <table id="transactionT"  class="sortable borderLine">
    <!-- Transaction History Table -->
    <thead>
      <tr style="top: expression(this.offsetParent.scrollTop -2);">

        <th class="panelLabelFixed">
          <div><a href="#" class="sortheader" onclick="ts_resortTable(this, 0);return false;">Cntct<span class="sortarrow">&nbsp;&nbsp;&nbsp;</span></a></div>
        </th>

        <th class="panelLabelFixed" >
          <div><a href="#" class="sortheader" onclick="ts_resortTable(this, 1);return false;">Assoc<span class="sortarrow">&nbsp;&nbsp;&nbsp;</span></a></div>
        </th>

        <th class="panelLabelFixed">
          <div><a href="#" class="sortheader" onclick="ts_resortTable(this, 2);return false;">Line<span class="sortarrow">&nbsp;&nbsp;&nbsp;</span></a></div>
        </th>

        <th class="panelLabelFixed">
          <div><a href="#" class="sortheader" onclick="ts_resortTable(this, 3);return false;">Activity<span class="sortarrow">&nbsp;&nbsp;&nbsp;</span></a></div>
        </th>

        <th class="panelLabelFixed">
          <div><a href="#" class="sortheader" onclick="ts_resortTable(this, 4);return false;">Type<span class="sortarrow">&nbsp;&nbsp;&nbsp;</span></a></div>
        </th>

        <th class="panelLabelFixed">
          <div><a href="#" class="sortheader" onclick="ts_resortTable(this, 5);return false;">Cost<span class="sortarrow">&nbsp;&nbsp;&nbsp;</span></a></div>
        </th>

        <th class="panelLabelFixed" >
          <div><a href="#" class="sortheader" onclick="ts_resortTable(this, 6);return false;">Loc<span class="sortarrow">&nbsp;&nbsp;&nbsp;</span></a></div>
        </th>

        <th class="panelLabelFixed">
          <div><a href="#" class="sortheader" onclick="ts_resortTable(this, 7);return false;">Qty<span class="sortarrow">&nbsp;&nbsp;&nbsp;</span></a></div>
        </th>

        <th class="panelLabelFixed" >
          <div><a href="#" class="sortheader"...

CSS

#transactionIT {
  position: relative;
  height: 10em;
  overflow: scroll;
  width: 100%;
}

#transactionT{
  width:100%;
  border:0; 
}

#transactionT tr{
  background-color: #FFFFFF;
  padding-left: 2px;
   width: 100%;
   height: 20px
}

.panelLabelFixed{
  vertical-align:top
}


.bottom{
  padding:50em;
}

thead{
  background-color:#fff;
}

JavaScript

function stickyTableHead(tableID) {
  var $tmain = $(tableID);
  var $parent = $(tableID).parent();
  var pos = $parent.offset().top + $tmain.find(">thead").height();
  var $tScroll = $tmain.children("thead")
    .clone()
    .wrapAll('<table id="tScroll" />')
    .parent()
    .addClass($(tableID).attr("class"))
    .css("position", "sticky")
    .css("display", "none")
    .insertBefore($parent);


  $($parent).scroll(function() {
    var dataScroll = $tScroll.data("scroll");
    dataScroll = dataScroll || false;
    if ($(this).scrollTop() >= $tmain.find(">thead").height()) {
      if (!dataScroll) {
        $tScroll
          .data("scroll", true)
          .show()
          .find("th").each(function() {
            $(this).width($tmain.find(">thead>tr>th").eq($(this).index()).width());
          });
      }
    } else {
      if (dataScroll) {
        $tScroll
          .data("scroll", false)
          .hide();
      }
    }
  });
}

$(document).ready(function() {
  stickyTableHead('#transactionT');
});