Horizontal Scroll handling for the vertical header and scroll for the first column using Ionic 3

I am developing an app with Ionic 3 and I have looked everywhere to make part of my ion-grid have a horizontal scroll for the header and the first ion-col column stays fixed and only moves vertically.

Any ideas ???

I've tried Css and it does not work for Ionic very well. Thanks

<ion-header>
<ion-navbar color="blue_sodimac">
<ion-title>
  Detalle diario de ventas
</ion-title>
<ion-buttons end>
  <button ion-button menuToggle>
    <ion-icon name="menu"></ion-icon>
  </button>
</ion-buttons>
</ion-navbar>

</ion-header>

<ion-content>
<ion-scroll scrollX="true" scrollY="true" class="data-scroll">
<ion-grid class="data-table">
  <ion-row class="head">
    <ion-col col-1 col-md-1 col-sm-1></ion-col>
    <ion-col col-6 col-md-6 col-sm-6>Venta Diaria (Miles)</ion-col>
    <ion-col col-3 col-md-3 col-sm-3>% V. Diaria</ion-col>
    <ion-col col-2 col-md-2 col-sm-2>% V. Acumulada</ion-col>
  </ion-row>
  <ion-row class="subhead">
    <ion-col col-1 col-md-1 col-sm-1 text-center>Día</ion-col>
    <ion-col col-2 col-md-2 col-sm-2>Vta mar. 18</ion-col>
    <ion-col col-2 col-md-2 col-sm-21>Plan mar. 18</ion-col>
    <ion-col col-2 col-md-2 col-sm-2>Vta mar. 17</ion-col>
    <ion-col col-1 col-md-1 col-sm-1 text-center>PL/EA</ion-col>
    <ion-col col-2 col-md-2 col-sm-2 text-center>Com Vta</ion-col>
    <ion-col col-1 col-md-1 col-sm-1 text-center>PL/EA</ion-col>
    <ion-col col-1 col-md-1 col-sm-1 text-center>Com Vta</ion-col>
  </ion-row>
</ion-grid>
<ion-grid class="data-table2">
  <ion-row *ngFor="let item of detalle" class="contenido" (click)="goToMetas(page)">
    <ion-col text-center col-1 col-md-1 col-sm-1>{{ item.dia }}</ion-col>
    <ion-col col-2 col-md-2 col-sm-2>${{ item.ventaEA | number }}</ion-col>
    <ion-col col-2 col-md-2 col-sm-2>${{ item.ventaPL | number }}</ion-col>
    <ion-col col-2 col-md-2 col-sm-2>${{ item.ventaAA | number }}</ion-col>
    <ion-col text-center col-1 col-md-1 col-sm-1 [style.color]="getColor(item.diario)">{{ item.diario }}%</ion-col>
    <ion-col text-center col-2 col-md-2 col-sm-2 [style.color]="getColor(item.comVentadia)">{{ item.comVentadia }}%</ion-col>
    <ion-col text-center col-1 col-md-1 col-sm-1 [style.color]="getColor(item.acumulado)">{{ item.acumulado }}%</ion-col>
    <ion-col text-center col-1 col-md-1 col-sm-1 [style.color]="getColor(item.comVentaAcum)">{{ item.comVentaAcum }}%</ion-col>
  </ion-row>
  <ion-row *ngFor="let item of detalle" class="contenido" (click)="goToMetas(page)">
    <ion-col text-center col-1 col-md-1 col-sm-1>{{ item.dia }}</ion-col>
    <ion-col col-2 col-md-2 col-sm-2>${{ item.ventaEA | number }}</ion-col>
    <ion-col col-2 col-md-2 col-sm-2>${{ item.ventaPL | number }}</ion-col>
    <ion-col col-2 col-md-2 col-sm-2>${{ item.ventaAA | number }}</ion-col>
    <ion-col text-center col-1 col-md-1 col-sm-1 [style.color]="getColor(item.diario)">{{ item.diario }}%</ion-col>
    <ion-col text-center col-2 col-md-2 col-sm-2 [style.color]="getColor(item.comVentadia)">{{ item.comVentadia }}%</ion-col>
    <ion-col text-center col-1 col-md-1 col-sm-1 [style.color]="getColor(item.acumulado)">{{ item.acumulado }}%</ion-col>
    <ion-col text-center col-1 col-md-1 col-sm-1 [style.color]="getColor(item.comVentaAcum)">{{ item.comVentaAcum }}%</ion-col>
  </ion-row>
</ion-grid>
</ion-scroll>

</ion-content>