I am getting dynamic data from database and displaying the information in the table. Requirement is i want to create a table with fixed header. When i scroll down to see the records header should be fixed without scrolling,so that users can see the header while scrolling to see the data.I tried taking two separate tables one for the header and other to display data but issue is the width of the header column and data column's is differing as i'm getting dynamic data and even if i give the same width for the header td and data td it's differing.
Please find the fiddle :http://jsfiddle.net/fj8wM/4549/
Below is the sample code:
<div align="center" style="padding: 10px;border: 2px;">
<div id="test" style="float: left; border: 0px solid #99ffff;"> <table cellpadding="2px" cellspacing="2px" style="border: 0px solid #ffffff; margin-right: 15px; margin-bottom: 4px;">
<tr>
<td>
<table cellpadding="0px" cellspacing="0px" style="margin-bottom: 5px;border-bottom:solid gray 2px; border-right:solid gray 2px;" height="20px" width="444px">
<tr>
<td colspan="2" style="border-right:solid gray 1px;">
<span style="float:left;font-family:Impact;font-weight:normal;font-size:22px;letter-spacing:1px;" class="til" data-title="MyData">
MyData</span>
<span style="float:right;vertical-align: middle;margin-top: 5px;padding-right: 2px;">Statistical View </span>
</td>
</tr>
..
</table></div> </td></tr>
</table></td></tr></table></div></div>
PS: I have multiple div's in my code and that is required for my code, as i need to get some dynamic data and show. Above sample code is the overall rough code of my actual code.
When i scroll down to view data, table header should be fixed. I can use css, javascript or jquery to achieve this functionality.Appreciate your help. Thanks.
