With CSS
With JavaScript:
Dynamic Table / No limit of column/ Fixed table Header on scroll and Fixed table column on scroll ***** Complete Code ****
<!DOCTYPE html>
<html>
<head>
<style>
div.relative {
position: relative;
width: 600px;
height: 250px;
overflow-x: scroll;
border: 1px solid #73AD21;
}
.ashTest {
position: absolute;
background-color: #d59b9b;
}
.scrollHead {
position: absolute;
background-color: #d59b9b;
}
</style>
</head>
<body>
<div class="mainPar">
<div class="relative" id="relative" onscroll="xyz()">
<table class="scrollHead" id="scrollHeadF" style="z-index:1; background-color:brown">
<tr>
<th >TYPE</th>
</tr>
</table>
<table class="scrollHead" id="scrollHead">
<tr>
<th style="width:90px">TYPE</th>
<th style="width:90px">AMC</th>
<th style="width:90px">AME</th>
<th style="width:90px">AMJ</th>
<th style="width:90px">AMK</th>
<th style="width:90px">AMNA</th>
<th style="width:90px">AMSEA</th>
<th style="width:90px">AMT</th>
<th style="width:90px">OTHERS</th>
<th style="width:90px">TYPE</th>
<th style="width:90px">AMC</th>
<th style="width:90px">AME</th>
<th style="width:90px">AMJ</th>
<th style="width:90px">AMK</th>
<th style="width:90px">AMNA</th>
<th style="width:90px">AMSEA</th>
<th style="width:90px">AMT</th>
<th style="width:90px">OTHERS</th>
</tr>
</table>
<div class="ashTest" id="frozen">
<table>
<tbody>
<tr>
<th>TYPE</th>
</tr>
<tr>
<th>AShw</th>
</tr>
<tr>
<th>AShw</th>
</tr>
<tr>
<th>AShw</th>
</tr>
<tr>
<th>AShw</th>
</tr>
<tr>
<th>AShw</th>
</tr>
<tr>
<th>AShw</th>
</tr>
<tr>
<th>AShw</th>
</tr>
<tr>
<th>AShw</th>
</tr>
<tr>
<th>AShw</th>
</tr>
<tr>
<th>AShw</th>
</tr>
<tr>
<th>AShw</th>
</tr>
</tbody>
</table>
</div>
<table>
<tbody>
<tr>
<th style="width:90px">TYPE</th>
<th style="width:90px">AMC</th>
<th style="width:90px">AME</th>
<th style="width:90px">AMJ</th>
<th style="width:90px">AMK</th>
<th style="width:90px">AMNA</th>
<th style="width:90px">AMSEA</th>
<th style="width:90px">AMT</th>
<th style="width:90px">OTHERS</th>
<th style="width:90px">TYPE</th>
<th style="width:90px">AMC</th>
<th style="width:90px">AME</th>
<th style="width:90px">AMJ</th>
<th style="width:90px">AMK</th>
<th style="width:90px">AMNA</th>
<th style="width:90px">AMSEA</th>
<th style="width:90px">AMT</th>
<th style="width:90px">OTHERS</th>
</tr>
<tr ng-repeat="x in LpRgStk" class="ng-scope">
<td>OH</td>
<td>4</td>
<td>0</td>
<td>0</td>
<td>4</td>
<td>0</td>
<td>0</td>
<td>5</td>
<td>0</td>
<td>OH</td>
<td>4</td>
<td>0</td>
<td>0</td>
<td>4</td>
<td>0</td>
<td>0</td>
<td>5</td>
<td>0</td>
</tr>
<tr>
<td>TYPE</td>
<td>AMC</td>
<td>AME</td>
<td>AMJ</td>
<td>AMK</td>
<td>AMNA</td>
<td>AMSEA</td>
<td>AMT</td>
<td>OtdERS</td>
<td>TYPE</td>
<td>AMC</td>
<td>AME</td>
<td>AMJ</td>
<td>AMK</td>
<td>AMNA</td>
<td>AMSEA</td>
<td>AMT</td>
<td>OtdERS</td>
</tr>
<tr ng-repeat="x in LpRgStk" class="ng-scope">
<td>OH</td>
<td>4</td>
<td>0</td>
<td>0</td>
<td>4</td>
<td>0</td>
<td>0</td>
<td>5</td>
<td>0</td>
<td>OH</td>
<td>4</td>
<td>0</td>
<td>0</td>
<td>4</td>
<td>0</td>
<td>0</td>
<td>5</td>
<td>0</td>
</tr>
<tr>
<td>TYPE</td>
<td>AMC</td>
<td>AME</td>
<td>AMJ</td>
<td>AMK</td>
<td>AMNA</td>
<td>AMSEA</td>
<td>AMT</td>
<td>OtdERS</td>
<td>TYPE</td>
<td>AMC</td>
<td>AME</td>
<td>AMJ</td>
<td>AMK</td>
<td>AMNA</td>
<td>AMSEA</td>
<td>AMT</td>
<td>OtdERS</td>
</tr>
<tr ng-repeat="x in LpRgStk" class="ng-scope">
<td>OH</td>
<td>4</td>
<td>0</td>
<td>0</td>
<td>4</td>
<td>0</td>
<td>0</td>
<td>5</td>
<td>0</td>
<td>OH</td>
<td>4</td>
<td>0</td>
<td>0</td>
<td>4</td>
<td>0</td>
<td>0</td>
<td>5</td>
<td>0</td>
</tr>
<tr>
<td>TYPE</td>
<td>AMC</td>
<td>AME</td>
<td>AMJ</td>
<td>AMK</td>
<td>AMNA</td>
<td>AMSEA</td>
<td>AMT</td>
<td>OTHERS</td>
<td>TYPE</td>
<td>AMC</td>
<td>AME</td>
<td>AMJ</td>
<td>AMK</td>
<td>AMNA</td>
<td>AMSEA</td>
<td>AMT</td>
<td>OTHERS</td>
</tr>
<tr ng-repeat="x in LpRgStk" class="ng-scope">
<td>OH</td>
<td>4</td>
<td>0</td>
<td>0</td>
<td>4</td>
<td>0</td>
<td>0</td>
<td>5</td>
<td>0</td>
<td>OH</td>
<td>4</td>
<td>0</td>
<td>0</td>
<td>4</td>
<td>0</td>
<td>0</td>
<td>5</td>
<td>0</td>
</tr>
<tr>
<td>TYPE</td>
<td>AMC</td>
<td>AME</td>
<td>AMJ</td>
<td>AMK</td>
<td>AMNA</td>
<td>AMSEA</td>
<td>AMT</td>
<td>OTHERS</td>
<td>TYPE</td>
<td>AMC</td>
<td>AME</td>
<td>AMJ</td>
<td>AMK</td>
<td>AMNA</td>
<td>AMSEA</td>
<td>AMT</td>
<td>OTHERS</td>
</tr>
<tr ng-repeat="x in LpRgStk" class="ng-scope">
<td>OH</td>
<td>4</td>
<td>0</td>
<td>0</td>
<td>4</td>
<td>0</td>
<td>0</td>
<td>5</td>
<td>0</td>
<td>OH</td>
<td>4</td>
<td>0</td>
<td>0</td>
<td>4</td>
<td>0</td>
<td>0</td>
<td>5</td>
<td>0</td>
</tr>
<tr>
<td>TYPE</td>
<td>AMC</td>
<td>AME</td>
<td>AMJ</td>
<td>AMK</td>
<td>AMNA</td>
<td>AMSEA</td>
<td>AMT</td>
<td>OTHERS</td>
<td>TYPE</td>
<td>AMC</td>
<td>AME</td>
<td>AMJ</td>
<td>AMK</td>
<td>AMNA</td>
<td>AMSEA</td>
<td>AMT</td>
<td>OTHERS</td>
</tr>
<tr ng-repeat="x in LpRgStk" class="ng-scope">
<td>OH</td>
<td>4</td>
<td>0</td>
<td>0</td>
<td>4</td>
<td>0</td>
<td>0</td>
<td>5</td>
<td>0</td>
<td>OH</td>
<td>4</td>
<td>0</td>
<td>0</td>
<td>4</td>
<td>0</td>
<td>0</td>
<td>5</td>
<td>0</td>
</tr>
</tbody>
</table>
</div>
</div>
<script type="text/javascript">
xyz = function () {
let x = document.getElementById('relative').scrollLeft;
document.getElementById('frozen').style.left = x + 'px';
let y = document.getElementById('relative').scrollTop;
document.getElementById('scrollHead').style.top = y + 'px';
document.getElementById('scrollHeadF').style.left = x + 'px';
document.getElementById('scrollHeadF').style.top = y + 'px';
}
</script>
</body>
</html>
No comments:
Post a Comment