Trying to create an HTML table with a fixed header and fixed first two columns, but encountering issues with the table displaying at the top of the page instead of below a div with a yellow background. Looking for a solution similar to the one shown in the JSFiddle link provided.
Check out the demo here: http://jsfiddle.net/praveen_programmer/z3bzv9j8/1/
The current CSS code has the header of the table displaying at the top of the page. The goal is to have the table with the header displayed below a div with a yellow background. The content within the div will be dynamic and may increase in size.
Here is the CSS being used:
.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;
}
Here is the JavaScript code:
$(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 here is the 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>