如何强制离子滑块尊重柱宽

通过构建应用程序，我一直在教自己新版本的AngularJS和Ionic . 目前我有一个使用离子行和列构建的页面 . 我在页面上有一个50/50列，用于呈现JSON数据 . 左列是文本表，右列是离子滑块中的图像 .

问题是离子滑块不尊重列宽，我不知道如何纠正这个问题（我不太熟悉flexbox css） . 上次我使用Ionic（v1）时，离子滑动盒元素并没有给我带来这个问题 .

这是我正在使用的HTML模板代码：

<ion-header>

  <ion-navbar>
    <ion-title>{{macroDetails.title}}</ion-title>
  </ion-navbar>

</ion-header>


<ion-content padding>

  <ion-card>
    <ion-card-header><h1>{{macroDetails.title}}</h1></ion-card-header>
    <ion-card-content>
      <ion-row>
        <ion-col col-50>

          <table>
            <tr>
              <td width="20%"><strong>Sensitivity Rating</strong></td>
              <td width="80%">{{macroDetails.sensitivity}}</td>
            </tr>
            <tr>
              <td><strong>Phylum</strong></td>
              <td>{{macroDetails.phylum}}</td>
            </tr>
            <tr>
              <td><strong>Class</strong></td>
              <td>{{macroDetails.class}}</td>
            </tr>
            <tr>
              <td><strong>Order</strong></td>
              <td>{{macroDetails.order}}</td>
            </tr>
            <tr>
              <td><strong>Family</strong></td>
              <td>{{macroDetails.family}}</td>
            </tr>
            <tr>
              <td><strong>Genera</strong></td>
              <td>{{macroDetails.genera}}</td>
            </tr>
            <tr>
              <td><strong>Size</strong></td>
              <td>{{macroDetails.size}}</td>
            </tr>
            <tr>
              <td><strong>Habitat</strong></td>
              <td>{{macroDetails.habitat}}</td>
            </tr>
            <tr>
              <td><strong>Diet</strong></td>
              <td [innerHTML]="macroDetails.diet"></td>
            </tr>
            <tr>
              <td><strong>Features</strong></td>
              <td>{{macroDetails.features}}</td>
            </tr>
          </table>
        </ion-col>

        <ion-col col-50>
          <small class="slideinfo">Swipe to change the images</small>
          <ion-slides pager="true">
            <ion-slide *ngFor="let images of macroDetails.featured_image">
              <img src="../assets/imgs/specimens/{{images}}.jpg" />
            </ion-slide>
          </ion-slides>
        </ion-col>

      </ion-row>
    </ion-card-content>

我已经查看了离子论坛和SO的解决方案，但还没有看到任何 . 只是希望有人之前遇到过这种情况并且可以为它推荐一个解决方案 .