您可以看到进度条与文本不符。酒吧是一个单独的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>
似乎为.progress
设置适当的边距就足够了,像这样:
.progress {
margin: 10px 0 !important;
}
或此
.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>