テーブルがアンドロイドデバイスのコレクションリピート内でスクロールしていません

Question

コレクションリピート内でテーブルを水平方向にスクロールする問題があり、解決策が見つかりません。スクロールはウェブブラウザで正常に動作していますが、実際のアンドロイドデバイスでは動作しません。 コードは

<ion-content> 
<ion-refresher on-refresh="doRefresh()"></ion-refresher> 
    <div class="list"> 
    <div class="item" collection-repeat="lists in list" 
      item-height="getItemHeight(lists, $index)" 
      ng-style="{height:getItemHeight(lists, $index)}"> 

     <h2 style="text-align: center;" class="padding">{{lists.name}}</h2> 

      <p class="text-center padding"> 

      <img ng-src="{{lists.link}}" width="200px" height"250px"> 

      </p> 

<div class="padding"> 
    <ion-scroll direction="x" class="wide-as-needed"> 

    <table class="table1"> 
    <tr> 
     <th>size 
     </th> 
     <th>unit 
     </th> 
     <th>box packing 
     </th> 
     <th>type 
     </th> 
     <th>price 
     </th> 
    </tr> 
    <tr ng-repeat="company in lists.array"> 
     <td>{{company.size}} 
     </td> 
     <td>{{company.unit}} 
     </td> 
     <td>{{company.packing}} 
     </td> 
     <td>{{company.type}} 
     </td> 
     <td>{{company.price}} 
    </td> 
    </tr> 
    </table> 
    </ion-scroll> 

    </div>    

    </div> 
    </div> 
    </ion-content> 

Answer 1

<ion-content> 
<ion-refresher on-refresh="doRefresh()"></ion-refresher> 
<div class="list"> 
<div class="item" collection-repeat="lists in list" 
item-height="getItemHeight(lists, $index)" 
ng-style="{height:getItemHeight(lists, $index)}"> 
<h2 style="text-align: center;" class="padding">{{lists.name}}</h2> 
<p class="text-center padding"> 

     <img ng-src="{{lists.link}}" width="200px" height"250px"> 

     </p> 

<div class="card"> 


<ion-item> 

<ion-scroll direction="x" class="wide-as-needed" zooming="false" 
overflow-scroll="false" style="width: 100%; height:100%"> 

<table class="table1"> 
<tr> 
    <th>size 
    </th> 
    <th>unit 
    </th> 
    <th>box packing 
    </th> 
    <th>type 
    </th> 
    <th>price 
    </th> 
</tr> 
<tr ng-repeat="company in lists.array"> 
    <td>{{company.size}} 
    </td> 
    <td>{{company.unit}} 
    </td> 
    <td>{{company.packing}} 
    </td> 
    <td>{{company.type}} 
    </td> 
    <td>{{company.price}} 
</td> 
</tr> 
</table> 
</ion-scroll> 
</ion-item> 
</div>    

</div> 
</div> 
</ion-content> 

以下に示します。