title: How to set a large Dynamic table data responsive using ion-col
body: <p>here im facing a issue related      ion-col  , i am binding my dynamic data to the ion - row and display data in the ion-col here the table is huge and it is cutting off and widths of that unstable below is my cod</p>
  
  <pre><code>&lt;ion-grid class="contnr"&gt;
        &lt;ion-row style="" class="grid-head"&gt;
          &lt;ion-col width-40&gt;
            Transaction
          &lt;/ion-col&gt;
          &lt;ion-col width-40&gt;
            Count
          &lt;/ion-col&gt;
          &lt;ion-col width-40 &gt;
           Overall  Gross Amount
          &lt;/ion-col&gt;
          &lt;ion-col width-40 &gt;
            Overall Disc
          &lt;/ion-col&gt;
          &lt;ion-col  width-40&gt;
            Overall Tax
          &lt;/ion-col &gt;
          &lt;ion-col  width-40&gt;
           Overall ServiceTax
          &lt;/ion-col&gt;
          &lt;ion-col  width-40&gt;
           Overall Charge
          &lt;/ion-col&gt;
          &lt;ion-col  width-40&gt;
            Overall Net
          &lt;/ion-col&gt;
        &lt;/ion-row&gt;
        &lt;ion-row *ngFor="let value of resultData" style="background:#eff0f1" class="cont-rows"&gt;
  
          &lt;ion-col width-40&gt;
            {{value.TransacType}}
          &lt;/ion-col&gt;
          &lt;ion-col width-40&gt;
            {{value.Transactions}}
          &lt;/ion-col&gt;
          &lt;ion-col width-40&gt;
            {{value.Count}}
          &lt;/ion-col&gt;
          &lt;ion-col width-40&gt;
            {{value.OverallSales}}
          &lt;/ion-col&gt;
          &lt;ion-col width-40&gt;
            {{value.Discount}}
          &lt;/ion-col&gt;
          &lt;ion-col width-40&gt;
            {{value.OverallTax}}
          &lt;/ion-col&gt;
          &lt;ion-col width-40&gt;
            {{value.MandatoryTax}}
          &lt;/ion-col&gt;
          &lt;ion-col width-40&gt;
            {{value.ServiceCharge}}
          &lt;/ion-col&gt;
          &lt;ion-col width-40&gt;
            {{value.NetAmt}}
          &lt;/ion-col&gt;
        &lt;/ion-row&gt;
        &lt;ion-row&gt;
          &lt;ion-col&gt;
            Total
          &lt;/ion-col&gt;
  
          &lt;ion-col&gt;
            {{grossTotal}}
          &lt;/ion-col&gt;
          &lt;ion-col&gt;
            {{Nets}}
          &lt;/ion-col&gt;
  
        &lt;/ion-row&gt;
      &lt;/ion-grid&gt;
  </code></pre>
  
  <p>here the problem  the table is so long that it is cutting  off and even though im setting of using scss but the col and col data is not getting in properly aligning</p>
  
  <p><a href="https://i.stack.imgur.com/4OWK9.png" rel="noreferrer"><img src="https://i.stack.imgur.com/4OWK9.png" alt="Table Data"></a></p>