Resolved - http://jsfiddle.net/CrSpu/11704/
I'm facing an issue with a table that has autoscroll functionality.
I am looking to freeze the header of the table when automatic scrolling occurs, or you can test it out using my code pen.
I'm uncertain about how to address this problem and freeze the header table using <thead></thead>
This is the code snippet:
$(document).ready(function() {
pageScroll();
$("#contain").mouseover(function() {
clearTimeout(my_time);
}).mouseout(function() {
pageScroll();
});
});
function pageScroll() {
var objDiv = document.getElementById("contain");
objDiv.scrollTop = objDiv.scrollTop + 1;
if (objDiv.scrollTop == (objDiv.scrollHeight - 100)) {
objDiv.scrollTop = 0;
}
my_time = setTimeout('pageScroll()', 25);
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="contain">
<table border="1">
<thead>
<tr>
<th colspan="5">Info Data</th>
</tr>
<tr>
<th>Name</th>
<th>Gender</th>
<th>Phone</th>
<th>Country</th>
<th>Position</th>
</tr>
</thead>
<tbody>
<tr>
<td>Salman</td>
<td>Male</td>
<td>0123456789</td>
<td>Indonesia</td>
<td>Front-end Developer</td>
</tr>
</tbody>
</table>
</div>