I am currently facing an issue with a bootstrap progress bar in my table cells. The table appears to have excessive padding at the bottom, causing it to be taller than necessary.
My goal is to eliminate the padding at the bottom of the cells. I attempted to reduce the size of the progress bar and set the cell padding to 0px, but it did not achieve the desired outcome. How can I reduce the extra space at the bottom of the table cells?
.progress {
height: 10px;
}
.table > tbody > tr > td{
padding-top: 2px;
padding-bottom: 0px;
}
<table cellspacing="0" cellpadding="0" class="table table-striped">
<tbody>
<tr>
<th>Progress</th>
<th>CustomerID</th>
<th>Name</th>
</tr>
<tr>
<td>
<div class="progress">
<div id="10010" class="progress-bar progress-bar-info progress-bar-striped active" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width:20%;"> </div>
</div>
</td>
<td>NYC</td>
<td>123</td>
</tr>
<tr>
<td>
<div class="progress">
<div id="10012" class="progress-bar progress-bar-info progress-bar-striped active" role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" style="width:30%;"> </div>
</div>
</td>
<td>CT</td>
<td>1001</td>
</tr>
<tr>
<td>
<div class="progress">
<div id="10013" class="progress-bar progress-bar-info progress-bar-striped active" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width:50%;"> </div>
</div>
</td>
<td>ME</td>
<td>10013</td>
</tr>
</tbody>
</table>
I have tried adjusting the progress bar and cell padding to remove the extra space, but it is not working as expected. Can you please provide guidance on how to resolve this issue?