Bootstrap 4 eliminate white space from title - html

Question

I would like to remove the white space between Table Title and Sub Titles.
Also Sub Title "Sub1" together with the icon should be left-aligned within the cell
<div class="mdc-layout-grid__cell stretch-card mdc-layout-grid__cell--span-3">
<div class="mdc-card p-0">
<h6 class="card-title">Table title</h6>
<div class="table-responsive">
<table class="table">
<thead bgcolor="#aed581">
<tr>
<th>
<span class="text-left">Sub1</span>
<span class="material-icons refresh-icon">refresh</span>
</th>
<th>Sub2</th>
</tr>
</thead>
<tbody>
<tr>
<td class="text-left">A</td>
<td>18.5%</td>
</tr>
<tr>
<td class="text-left">B</td>
<td>16.3%</td>
</tr>
<tr>
<td class="text-left">V</td>
<td>15.5%</td>
</tr>
</table>
</div>
</div>
</div>

Answer 1

You need do with some css for remove that space
apply this css into ur css file margin-bottom: 0; will remove space from table-responsive and card title
.card-title{
background-color: #aed581;
padding: 15px;
font-weight: bold;
margin-bottom: 0;
}
.fa-repeat{
color: lightgray;
cursor: pointer;
}
and for icon i used font-awesome icon here is the CDN link
https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css
Here is the HTML
<div class="mdc-layout-grid__cell stretch-card mdc-layout-grid__cell--span-3">
<div class="mdc-card p-0">
<h6 class="card-title">Table title</h6>
<div class="table-responsive">
<table class="table">
<thead bgcolor="#aed581">
<tr>
<th>
<i class="fa fa-repeat"></i>
Sub1
<!-- <span class="material-icons refresh-icon">refresh</span> -->
</th>
<th>Sub2</th>
</tr>
</thead>
<tbody>
<tr>
<td class="text-left">A</td>
<td>18.5%</td>
</tr>
<tr>
<td>B</td>
<td>16.3%</td>
</tr>
<tr>
<td>V</td>
<td>15.5%</td>
</tr>
</table>
</div>
</div>
</div>
You can edit or preview code here