<div class="tbl-container apvTable">
<table class="custashGrid width100p">
<tr>
<th style="width:150px">MAT</th>
<th style="width:80px">LO</th>
<th style="width:180px">LO TYPE</th>
<th>MIN</th>
<th>MAX</th>
<th>12M FINAL FCST</th>
<th>12M STAT FCST</th>
<th>12M USAGE</th>
<th>USABLE OH</th>
<th>WOH</th>
<th>BOH</th>
<th>OPEN PO</th>
<th>BASE OPEN PO</th>
<th>W PO</th>
<th>SO</th>
<th>OPEN SO</th>
<th>W SO</th>
<th>FILL%</th>
<th>OH </th>
<th>DOI</th>
<th> FCST</th>
<th>FCST</th>
<th>FLEX TSL</th>
<th>INFLEX TSL</th>
<th>ZERO BIN </th>
<th>BIN AGE</th>
<th>TSL SINCE</th>
<th>LWS BOX</th>
<th>BOX</th>
<th>EPFCST</th>
<th>FPM ANNUAL FCST</th>
<th>POINTS</th>
<th>RATING</th>
<th>ETA KPI LWS</th>
<th>ETA KPI STP</th>
</tr>
<tr v-for="(x, index) in items1" v-bind:key="index">
<td>{{ x.MAT }}</td>
<td>{{ x.LOC }}</td>
<td>{{ x.LOCT }}</td>
<td>{{ x.MIN }}</td>
<td>{{ x.MAX }}</td>
<td>{{ x.FCST }}</td>
<td>{{ x.StFcst }}</td>
<td>{{ x.USAGE }}</td>
<td>{{ x.OH }}</td>
<td>{{ x.WOH }}</td>
<td>{{ x.BOH }}</td>
<td>{{ x.OPEN_PO }}</td>
<td>{{ x.BsOPo }}</td>
<td>{{ x.WOPo }}</td>
<td>{{ x.OPEN_SO }}</td>
<td>{{ x.BsOSo }}</td>
<td>{{ x.WOSo }}</td>
<td>{{ x.LcFilPrc }}</td>
<td>{{ x.LcOhDoi }}</td>
<td>{{ x.LcTslDoi }}</td>
<td>{{ x.FlFcst }}</td>
<td>{{ x.InfFcst }}</td>
<td>{{ x.FlTsl }}</td>
<td>{{ x.InfTsl }}</td>
<td>{{ x.ZoSn }}</td>
<td>{{ x.ZoAg }}</td>
<td>{{ x.TslS }}</td>
<td>{{ x.LWS_BOX }}</td>
<td>{{ x.STP_BOX }}</td>
<td>{{ x.EPFCST }}</td>
<td>{{ x.FpmAnFc }}</td>
<td>{{ x.RskP }}</td>
<td>{{ x.RskR }}</td>
<td>{{ x.EtaLws }}</td>
<td>{{ x.EtaStp }}</td>
</tr>
</table>
</div>
CSS:
.tbl-container {
height: 200px;
width: 100%;
overflow: scroll;
margin: 0 auto;
}
.custashGrid {
table-layout: fixed;
}
.custashGrid th,
.custashGrid td {
text-wrap: nowrap;
}
.custashGrid th,
.custashGrid td {
text-wrap: nowrap;
width: 130px;
}
.custashGrid th {
position: sticky !important;
top: 0px;
z-index: 3;
color: #ffffff;
background-color: #1f4e77;
padding: 2px;
}
.custashGrid tr:nth-child(even) td:nth-child(1) {
position: sticky;
top: 0;
left: 0;
z-index: 3;
background-color: #e0eaf5;
}
.custashGrid tr:nth-child(odd) td:nth-child(1) {
position: sticky;
top: 0;
left: 0;
z-index: 3;
background-color: #fff ;
}
.custashGrid tr:nth-child(even) td:nth-child(2) {
position: sticky;
top: 0;
left: 150px;
z-index: 3;
background-color: #e0eaf5;
}
.custashGrid tr:nth-child(odd) td:nth-child(2) {
position: sticky;
top: 0;
left: 150px;
z-index: 3;
background-color: #fff;
}
.custashGrid tr:nth-child(even) td:nth-child(3) {
position: sticky;
top: 0;
left: 230px;
z-index: 3;
background-color: #e0eaf5;
}
.custashGrid tr:nth-child(odd) td:nth-child(3) {
position: sticky;
top: 0;
left: 230px;
z-index: 3;
background-color: #fff;
}
.custashGrid th:nth-child(1){
position: sticky;
top: 0;
left: 0;
z-index:4;
}
.custashGrid th:nth-child(2) {
position: sticky;
top: 0;
left: 150px;
z-index:4;
}
.custashGrid th:nth-child(3) {
position: sticky;
top: 0;
left: 230px;
z-index:4;
}
