即使在滚动之后也使表标题的位置固定

Question

I have a table with a vertical scroll bar

<div id="div_data" style="top: 7px;">
<table id="data" cellspacing="0" cellpadding="0">
            <thead>
              <tr class="fix"><td class="newClass"> <div> Algebra </div></td>
                   <td class="newClass"><div> Geometry</div></td>
                   <td class="newClass"><div> Theorems</div></td> 
                   <td class="newClass"><div> Comment</div></td>
                   </tr>
            </thead>
            <tbody style="overflow:auto; height:100px;">
            ......................
            </tbody>

    </table>
        <table id="header-fixed" cellspacing="0" cellpadding="0"></table> 
    </div>      

When I scroll the #data table, I need to make the table heading elements to be fixed without scrolling.For that I have done the following jquery code:

var tableOffset = $("#data").offset().top;
var $header = $("#data > 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 >= tableOffset && $fixedHeader.is(":hidden")) {
            $fixedHeader.show();
        }
        else if (offset < tableOffset) {
            $fixedHeader.hide();
        } 
    });

The content inside the element of the first table is cloned inside the second table,but the position of the #header-fixed 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 #data table.My css is below:

#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;
}   

EDIT: 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

Answer 1

The only thing you have to do is that wrap your table body using tbody tag. And apply following css to that tag.

 tbody {
    display: block;
    height: 100px;
    overflow: auto;        
    width: 100%;
}