这是我的代码示例:
这是我的代码示例:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<div class="row">
<div class="col-6">
<div class="card mt-4">
<div class="card-header">
<h5 class="text-center">Comments</h5>
</div>
<div class="card-body">
<table class="table table-primary">
<thead>
<tr>
<th colspan="6">
<div class="pull-left">
<button type="button" class="btn btn-outline-secondary btn-sm"><i class="fa fa-plus-circle" aria-hidden="true"></i> Add New</button>
</div>
<div class="pull-right">
<button type="button" class="btn btn-outline-secondary btn-sm"><i class="fa fa-list" aria-hidden="true"></i> View All</button>
</div>
</th>
</tr>
<tr>
<th>Subject</th>
<th>Author</th>
<th>Date</th>
<th>Year</th>
<th>Edit</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
<tr>
<td>This is a test comment</td>
<td>John Wick</td>
<td>06/28/2019</td>
<td>2019</td>
<td class="text-center">
<button type="button" class="btn btn-outline-secondary btn-sm comment-edit">Edit</button>
</td>
<td class="text-center">
<button type="button" class="btn btn-outline-secondary btn-sm comment-delete">Delete</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
正如您在我的示例表中看到的那样,表格溢出了卡片主体。有没有一种方法可以将表格适配到卡片主体内?谢谢。