CSS ::如何禁用列表单元格中的滚动

时间:2018-10-09 03:28:50

标签: html css ionic-framework

我目前正在开发Ionic Cordova移动应用程序,并且使用ion-scroll属性以使列表可滚动。不幸的是,即使列表内部的表也可以滚动。有什么办法可以禁用此功能?我只希望列表本身可滚动而不是单个单元格中的表格。

  .collection-container {
  width: 150%;
  margin-left: -15.7px;
  padding-top: 4px;
  background-color: white;
  height: 100%;
  .button {
    font-size: 24px;
    margin: 0px;
    height: 28px;
    padding: 0px 5px;
  }
  .item {
    border-bottom: 0.55px solid color($colors, border);
    background-color: lightskyblue !important;
    height: 100px;
  }
  ion-scroll {
    margin-left: -17px;
    margin-top: -9.5px;
    width: 200%;
  }
  th {
    float: left;
    color: rgb(4, 38, 150);
  }
  td {
    float: right;
    color: rgb(4, 38, 150);
  }
  .checkbox {
    float: left;
    margin: 35px;
    margin-left: 8px;
  }
<div class="collection-container">
  <ion-scroll style="width:100%;height:90vh" scrollY="true">
    <ion-list class="dataList" scroll="true">
      <ion-content class="item" *ngFor="let item of collection">
        <ion-checkbox class="checkbox"></ion-checkbox>
        <table class="dataDisplay">
          <tr>
            <th>NAME OF MOTHER: </th>
            <td>{{ item.nameMother }}</td>
          </tr>
          <tr>
            <th>NAME OF CHILD: </th>
            <td>{{ item.nameChild }}</td>
          </tr>
          <tr>
            <th>DATE OF BIRTH (MM/DD/YYYY):</th>
            <td>{{ item.birthDate | date }}</td>
          </tr>
          <tr>
            <th>FORM COMPLETE: </th>
            <td>{{ item.Form }}</td>
          </tr>
          <tr>
            <th>Countdown: </th>
            <td><strong>{{ item.countdown }}</strong></td>
          </tr>
        </table>
      </ion-content>
    </ion-list>
  </ion-scroll>
</div>

0 个答案:

没有答案