make position of table heading fixed even after scrolling

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

easiest solution I have used. http://www.fixedheadertable.com/ — Binary101010, Oct 20 '14 at 10:40
@Binary101010 thanks,I need it like that plugin,But without plugins,can I do??I dont want plugins — Techy, Oct 20 '14 at 10:42
sorry. I do not know exactly how I would write it myself. I suggest using a lightweight plugin unless you really need to reinvent the wheel. — Binary101010, Oct 20 '14 at 10:43

score 0 · Answer 1 · answered Oct 20 '14 at 10:45

0

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

answered Oct 20 '14 at 10:45

Nishan Senevirathna

709
5
12

1

Try this http://stackoverflow.com/questions/17067294/html-table-with-100-width-with-vertical-scroll-inside-tbody – Nishan Senevirathna Oct 20 '14 at 10:57

make position of table heading fixed even after scrolling

1 Answers1