Adjust card width in bootstrap css - html

Question

In the following, how do I set all cards to have same widths? I currently see some cards exceeding the specified width because of the the table it is holding. I am viewing it on a laptop.
<main role="main" class="container">
<div class="container">
<div class="main-body">
<div class="row gutters-sm">
<div class="col-md-15">
<div class="card mb-3">
<div class="card-body">
<!-- stuff here-->
</div>
</div>
</div>
</div>
<div class="row gutters-sm">
<div class="col-md-15">
<div class="card mb-3">
<div class="card-body">
<!-- stuff here-->
</div> <!--end of card-->
</div>
</div>
</div>
<div class="row gutters-sm">
<div class="col-md-15">
<div class="card mb-3">
<div class="card-body">
<table class="table mb-0 table-hover">
<thead class="bg-primary">
<tr>
<th scope="col">SSSSSS</th>
<th scope="col">DDDDDD</th>
<th scope="col">FFFFFF</th>
<th scope="col">TTTTTT</th>
<th scope="col">GGGGGGGGG</th>
<th scope="col">AAAAAA</th>
</tr>
</thead>
<tbody>
<tr>
<td class="mb-0"><div class="col-md-1 text-secondary">String 1 </div></td>
<td class="mb-0"><div class="col-md-1 text-secondary">String 2 </div></td>
<td class="mb-0"><div class="col-md-1 text-secondary">String 3</div></td>
<td class="mb-0"><div class="col-md-1 text-secondary">String 4</div></td>
<td class="mb-0"><div class="col-md-1 text-secondary">TTTT </div></td>
<td class="mb-0">
<div class="col-sm-12">
<a class="btn btn-secondary " name="education" href="/edit/2">Edit</a>
<a class="btn btn-danger " name="education" href="/delete/2">Delete</a>
</div>
</td>
</tr>
</tbody>
</table>
<!-- stuff here-->
</div> <!--end of card body-->
</div>
</div>
</div>
</div>
</div>
</main>