Содержимое таблицы выходит из карты с помощью Materialise CSS

Question

Спокойной ночи.

Кто-нибудь знает, как сохранить содержимое внутри карты, используя таблицу внутри карты с MaterializeCSS?

Я работаю с VUE и MaterilizeCSS, но без VUE это так же.

Очевидно, что адаптивная таблица не связывается с картой.

Это мой код:

<div>
    <h3>Artículos</h3>
      <div class="row">
        <div class="col s12 m12 xl12">
            <div v-if="loading" class="center-align">
                <div class="progress center-align">
                    <div class="indeterminate"></div>
                </div>
            </div>
        <div class="card">
            <div v-if="!loading" class="card-content black-text">
                    <span class="card-title">
                        Lista de Artículos <a class="waves-effect waves-teal btn-flat"><i class="material-icons">playlist_add</i></a>
                    <div class="input-field" style="font-weight: normal;">
                        <input placeholder="Buscar" id="first_name" type="text" class="validate"
                            v-model="search"
                            @keyup="get(1,search)">
                    </div>
                    </span>

                  <table class="highlight centered responsive-table">
                    <thead style="color: #5d5d5d; font-size: 13px;">
                        <tr>
                            <th>Código</th>
                            <th>Nombre</th>
                            <th>Presentación</th>
                            <th>Opciones</th>
                        </tr>
                    </thead>

                  <tbody>
                      <tr v-for="article in arrayArticles" :key="article.id">
                          <td v-text="article.code"></td>
                          <td v-text="article.name"></td>
                          <td v-text="article.presentation"></td>
                          <td v-text="article.description"></td>
                          <td v-text="article.category.name"></td>
                          <td v-text="article.minimum_stock"></td>
                          <td v-if="article.current_stock >= article.minimum_stock">
                              <span class="badge green" style="color: white">{{article.current_stock}}</span>
                          </td>
                          <td v-else>
                              <span class="badge red" style="color: white">{{article.current_stock}}</span>
                          </td>
                          <td>${{article.purchace_price}}</td>
                          <td>${{article.sale_price}}</td>
                          <td>${{article.sale_price - article.purchace_price}}</td>
                          <td>
                            <div v-if="article.condition">
                              <span class="badge green" data-badge-caption="Inactivo" style="color: white"></span>
                            </div>
                            <div v-else>
                              <span class="badge blue-grey lighten-3" data-badge-caption="Inactivo" style="color: white"></span>
                            </div>
                          </td>
                          <td class="center-align">
                                <i class="material-icons" style="margin-left: 2px; color:#ffc107; cursor:pointer;"
                                @click="getById(article), fillSelectCategories()">edit</i>
                                <i style="margin-left: 5px; color:#ff6f00; cursor:pointer;" class="material-icons"
                                @click="deativate(article.id)">clear</i>
                          </td>
                      </tr>
                  </tbody>
                </table>
            </div>
          </div>
        </div>
    </div>
</div>

Прикрепленное изображение стола, выходящего из карты

Answer 1

Попробуйте так:

.table-responsive {
   display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar;
}

   <!-- Compiled and minified CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

    <!-- Compiled and minified JavaScript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    
  <div class="row">
    <div class="col s12 m6">
      <div class="card">
        <div class="card-content">
          <span class="card-title">Card Title</span>
           <div class="table-responsive"> 
             <table>
        <thead>
          <tr>
              <th>Id</th>
              <th>Name</th>
              <th>Item Name</th>
              <th>Item Description</th>
              <th>Item Quantity</th>
              <th>Item Price</th>
              <th>Total</th>
          </tr>
        </thead>

        <tbody>
          <tr>
            <td>11232132131</td>
            <td>Alvin</td>
            <td>Eclair</td>
            <td>Chocolate</td>
            <td>5</td>
            <td>$1.00</td>
            <td>$5.00</td>
          </tr>
          <tr>
             <td>24646546464</td>
            <td>Alan</td>
            <td>Jellybean</td>
             <td>Chocolate</td>
             <td>7</td>
            <td>$5.00</td>
             <td>$35.00</td>
          </tr>
          <tr>
             <td>36798799797</td>
            <td>Jonathan</td>
            <td>Lollipop</td>
             <td>Chocolate</td>
             <td>5</td>
            <td>$8.00</td>
            <td>$40.00</td>
          </tr>
        </tbody>
      </table>
            </div>
        </div>
       
      </div>
    </div>
  </div>