Horrizontal scrollable table within super tab

Hi ,

I am creating an MOBILE application where it is required to have a table on one tab . Well that table is having left most column is fixed one.
So when I just try to scroll that table horizontally , instead of table get scrolled , super tab is scrolled. Following is the code snippet

Home page.html


  <super-tabs [config]="config" >
    <super-tabs-toolbar slot="top"  style="color:white;">
        <ion-label>Tab 1</ion-label>    
        <!-- <ion-icon name="home"></ion-icon> -->
        <ion-label>Tab 2</ion-label>    

        <ion-card class="ion-no-padding ion-no-margin">
          <ion-card-content class="ion-no-padding ion-no-margin">
        Tab 2 content


import { Component, OnInit } from '@angular/core';
import {SuperTabsConfig } from '@ionic-super-tabs/core'

  selector: 'vedic-home',
  templateUrl: './home.page.html',
  styleUrls: ['./home.page.scss'],
export class HomePage implements OnInit {

  constructor() { }

  ngOnInit() {

  config: SuperTabsConfig = {
     sideMenu: 'left',
     shortSwipeDuration: 1500,



<ion-card class="ion-no-padding ion-no-margin">
<ion-card-content class="ion-no-padding "  >
<div class="zui-wrapper" >
  <div class="zui-scroller"  >
      <table class="zui-table">
                  <th class="zui-sticky-col">Name</th>
                  <th>Prior to NBA/Country</th>
                  <td class="zui-sticky-col">DeMarcus Cousins</td>
                  <td class="zui-sticky-col">Isaiah Thomas</td>
                  <td class="zui-sticky-col">Ben McLemore</td>
                  <td class="zui-sticky-col">Marcus Thornton</td>
                  <td>Louisiana State/USA</td>
                  <td class="zui-sticky-col">Jason Thompson</td>


 .zui-table {
    border: none;
    border-right: solid 1px #DDEFEF;
    border-collapse: separate;
    border-spacing: 0;
    font: normal 13px Arial, sans-serif;
.zui-table thead th {
    background-color: #DDEFEF;
    border: none;
    color: #336B6B;
    padding: 10px;
    text-align: left;
    text-shadow: 1px 1px 1px #fff;
    white-space: nowrap;
.zui-table tbody td {
    border-bottom: solid 1px #DDEFEF;
    color: #333;
    padding: 10px;
    text-shadow: 1px 1px 1px #fff;
    white-space: nowrap;
.zui-wrapper {
    position: relative;
.zui-scroller {
    margin-left: 101px;
    overflow-x: scroll;
    overflow-y: visible;
    padding-bottom: 5px;
    width: auto;
.zui-table .zui-sticky-col {
    border-left: solid 1px #DDEFEF;
    border-right: solid 1px #DDEFEF;
    left: 0;
    position: absolute;
    top: auto;
    width: 100px;

SO issue is , when I scroll right to a table , tab is also get scrolled and I jump to tab2 .
So kindly help me out on how to fix this issue. Please let me know if anything else is required.