As you can see the progressbar is not in line with the text. The bar is an seperate div:
<th width="300px"> Atv opgenomen / totaal: 22:48 h / 62.0 h </th> <th> <?php echo '<div class="progress"> <div class="progress-bar" role="progressbar" aria-valuenow="'.$perc_bar_atv.'" aria-valuemin="0" aria-valuemax="100" style="width: '.$perc_bar_atv.'%;"> '.round($perc_bar_atv).'% </div> </div>'; ?> </th>
Any suggestions how to get this inline? I have tried style="display: inline"
That works but removes some the markup
style="display: inline-block; vertical-align:center"
gives
Advertisement
Answer
It seems to set proper margin for .progress
is enough, like this:
.progress { margin: 10px 0 !important; }
or this
.progress { margin: auto 0 !important; }
.progress { margin: 10px 0 !important; } th { border: 1px solid green; }
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <table> <tr> <th width="300px"> Atv opgenomen / totaal: 22:48 h / 62.0 h </th> <th width="300px"> <div class="progress"> <div class="progress-bar" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 100%;">50%</div> </div> </th> </tr> </table>