<div id="div_data" class="div_data" onscroll="scrollx()">
<table id="table_data">
<tr>
<th class="locked_left"></th>
</tr>
</table>
</div> #table_data th.locked_left {
left: 0px;
background: white;
border: 1px solid black;
position: relative;
z-index: 300;
}function scrollx() {
for (var s = document.getElementsByClassName("locked_left"), t = 0; t < s.length; t++) {
parseFloat(document.getElementById("div_data").scrollLeft) > 100 ?
-100 ?
s[t].style.left = parseFloat(document.getElementById("div_data").scrollLeft) + -100 + "px" :
s[t].style.left = document.getElementById("div_data").scrollLeft + "px" :
s[t].style.left = "0px"
s[t].style.border = "1px solid black";
}
//scrollxlocation = parseFloat(document.getElementById("div_data").scrollLeft);//for fix the position after reload
}