Geek Answers Handbook

Sticky table header with sticky table column.

I need to create an html table (or something similar) with a fixed header and a fixed first two columns. The table should not be below the div at the top of the page. I tried many solutions, in all solutions with a fixed position, because of this display of the table on the top line of the page.

Like in jsfiddle link.

http://jsfiddle.net/praveen_programmer/z3bzv9j8/1/

Table heading displayed at the top. I want the table with the title to appear below the div with a yellow background color. The content in the div will be dynamic. We can increase.

My css: -

.tblTitle{ position:absolute; top:0px; margin-bottom:30px; background:lightblue; } td, th{ padding:5px; height:40px; width:40px; font-size:14px; } #vertical_scrolling_div{ display:inline-block; zoom: 1; *display:inline; padding-top:40px; height:300px; overflow-y: scroll; overflow-x: hidden; } #freeze_container{ display:inline-block; zoom: 1; *display:inline; vertical-align:top; width:100px; } #horizontal_scrolling_div{ display:inline-block; zoom: 1; *display:inline; width:200px; overflow-x:scroll; vertical-align:top; } .freeze_table{ background-color: #0099dd; z-index:2; } #left_table{ width:100px; } #inner_table{ width:400px; overflow:hidden; }

Javascript: -

 $(function(){ function getRows(rows, cols){ var rowString=""; for(var i=0;i<cols;i++){ rowString+="<tr>"; for(var j=0;j<rows;j++){ rowString+="<td>"+j+","+i+"</td>"; } rowString+="</tr>"; } return rowString; } $("#left_table").append(getRows(2,10)); $("#inner_table").append(getRows(8,10)); });

And html code: -

 <div style="height:100px;background-color:yellow;">Test-1</div> <div id="vertical_scrolling_div"> <div id="freeze_container"> <table id="left_table" class="freeze_table"> <tr class='tblTitle'> <th>Title 1</th> <th>Title 2</th> </tr> </table> </div> <div id="horizontal_scrolling_div"> <table id="inner_table"> <tr class='tblTitle'> <th>Title 3</th> <th>Title 4</th> <th>Title 5</th> <th>Title 6</th> </tr> </table> </div>

+4
source share
2 answers

here I updated your code according to your needs, the table title remains on top of the div (fixed).

 .tblTitle{ position:absolute; background:lightblue; top: 0; } .vertical_scrolling_div { position: relative; /* rest other code stays as they are */ }

Javascript

 $('#vertical_scrolling_div').scroll(function() { $('.tblTitle').css('top', this.scrollTop+"px"); });

https://jsfiddle.net/z3bzv9j8/9/

+1
source

Your headers are not well aligned because you set position to absolute in the header tags, try replacing it with position:relative on the .tblTitle tag and you will see that they are located below the Yellow div, from now on apply the correct style and make it look like , How do you like.

0
source

More articles:


All Articles