If I add a Bootstrap 3 progress bar to a Bootstrap table with table-condensed, I lose the "condensed" part of the rows (they get taller). Is there a default minimum height to a progress bar that would force table-condensed rows to be larger?
Here's an example of the behavior I'm trying to "fix":
JSFiddle: Condensed table/progress bar example
<table class='table table-condensed table-striped'>
<tr>
<td>one</td>
<td>two</td>
<td>three</td>
</tr>
<tr>
<td>one</td>
<td>two</td>
<td>three</td>
</tr>
<tr>
<td>one</td>
<td>two</td>
<td>three</td>
</tr>
</table>
<br/>
<table class='table table-condensed table-striped'>
<tr>
<td>one</td>
<td>two</td>
<td>three</td>
</tr>
<tr>
<td>one</td>
<td>
<div class='progress progress-striped'>
<div class="progress-bar progress-bar-warning" role="progressbar" style="width: 50%;">
Progress
</div>
</div>
</td>
<td>three</td>
</tr>
<tr>
<td>one</td>
<td>two</td>
<td>three</td>
</tr>
</table>
Bootstrap adds a margin-bottom: 20px;
to its progress bar divs. Overriding that sized table rows appropriately for me.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With