Simple table with 3 column fixed sticky applied in a pv

 

<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;

}