causita causita - 1 day ago 4
CSS Question

cell padding not working with progress bar on table's cell

I have a bootstrap progress bar on table cells. Everything is working fine except that there is a lot of padding at the bottom making the table unnecessarily tall.

I want to remove the padding from the cell's bottom. I tried making the progress bar smaller and making the cell's padding 0px but still not working the way I want it. How can I shave some of the bottom space?

.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>


jsfiddle

I want to remove the padding from the cell's bottom. I tried making the progress bar smaller and making the cell's padding 0px but still not working the way I want it. How can I shave some of the bottom space?

Answer

The .progress class has a bottom margin of 20px

.progress {
    height: 20px;
    margin-bottom: 20px;
    overflow: hidden;
    background-color: #f5f5f5;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
    box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
}

Override this in your own CSS

.progress {
    margin-bottom: 0;
}
Comments