title: make position of table heading fixed even after scrolling
body: <p>I have a table with a vertical scroll bar </p>
  
  <pre><code>&lt;div id="div_data" style="top: 7px;"&gt;
  &lt;table id="data" cellspacing="0" cellpadding="0"&gt;
              &lt;thead&gt;
                &lt;tr class="fix"&gt;&lt;td class="newClass"&gt; &lt;div&gt; Algebra &lt;/div&gt;&lt;/td&gt;
                     &lt;td class="newClass"&gt;&lt;div&gt; Geometry&lt;/div&gt;&lt;/td&gt;
                     &lt;td class="newClass"&gt;&lt;div&gt; Theorems&lt;/div&gt;&lt;/td&gt; 
                     &lt;td class="newClass"&gt;&lt;div&gt; Comment&lt;/div&gt;&lt;/td&gt;
                     &lt;/tr&gt;
              &lt;/thead&gt;
              &lt;tbody style="overflow:auto; height:100px;"&gt;
              ......................
              &lt;/tbody&gt;
  
      &lt;/table&gt;
          &lt;table id="header-fixed" cellspacing="0" cellpadding="0"&gt;&lt;/table&gt; 
      &lt;/div&gt;      
  </code></pre>
  
  <p>When I scroll the <code>#data table</code>, I need to make the table heading elements to be fixed without scrolling.For that I have done the following jquery code:</p>
  
  <pre><code>var tableOffset = $("#data").offset().top;
  var $header = $("#data &gt; thead").clone();
  var $fixedHeader = $("#header-fixed").append($header);  
      $("#div_data").scroll(function(){ 
          $('#div_row_headers').scrollTop($('#div_data').scrollTop()); 
           var offset = $(this).scrollTop();
  
          if (offset &gt;= tableOffset &amp;&amp; $fixedHeader.is(":hidden")) {
              $fixedHeader.show();
          }
          else if (offset &lt; tableOffset) {
              $fixedHeader.hide();
          } 
      });
  </code></pre>
  
  <p>The content inside the  element of the first table is cloned inside the second table,but the position of the <code>#header-fixed</code> table is not on the heading region of the first table.It is coming in the middle of the table.I just want to superimpose it on the position of the  elements in the
  <code>#data table</code>.My css is below:</p>
  
  <pre><code>#header-fixed { 
  position: fixed; 
  display:none;
  background-color:white;
  }
  table#header-fixed tr td {
      width: 155px;
  }       
  table#header-fixed tr td div {
      width: 155px;
      float: left;
      text-align: center;
  }   
  </code></pre>
  
  <p><strong>EDIT:</strong> When I scroll the windows scroll bar,the new table is fixed,I need to scroll the table,when I scroll the window scroll bar</p>