Content of table goes out of card with Materialize CSS - css

Question

Goodnight.
Does anyone know how to keep the content inside the card using a table inside the card with MaterializeCSS?
Im working with VUE y MaterilizeCSS but it's de same without VUE.
Apparently the responsive table does not communicate with the card.
This is my code:
<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>
Attached picture of the table coming out of the card

Answer 1

Try this way :
.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>