Bootstrap: Progress bars in table-condensed

twitter-bootstrap-3

Solution

Bootstrap adds a `margin-bottom: 20px;` to its progress bar divs. Overriding that sized table rows appropriately for me.

Problem

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

Original source