防止div在表th中换行[关闭]答案

【问题标题】：Prevent div from new line in table th [closed]防止div在表th中换行[关闭]
【发布时间】：2020-07-03 15:42:10
【问题描述】：

如您所见，进度条与文本不一致。该栏是一个单独的 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>

任何建议如何获得这个内联？我试过style="display: inline" 可以，但删除了一些标记

style="display: inline-block; vertical-align:center"gives

【问题讨论】：

要在<?php和?>之间显示html，你需要使用echo
你试过设置 style="display: inline-block; vertical-align:center"
请提供 CSS 规则。它可以提供帮助。没有规则 - 没有解决方案:)
@Awais 查看我更新的帖子。
@Banzay CSS > Bootstrap 3

标签： php html css twitter-bootstrap-3

【解决方案1】：

似乎为.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>

【讨论】：

这确实是一个非常好的解决方案！