如何在td内垂直对齐条形进度？

Question

嘿，我有这张桌子：

这是代码的一部分：

$('#grid_proyecto_id').append(
                    '<tr>'+
                        '<td id = "td_project_id" class="text-center">'+value.nombrePro+'</td>'+
                        '<td id = "td_project_id" class="text-center">'+value.numTareasPro+'</td>'+
                        '<td id = "td_project_id" class="text-center">'+value.numUsuariosPro+'</td>'+
                        '<td id = "td_project_id" class="text-center">'+value.numTerminadasPro+'</td>'+
                        '<td id = "td_project_id" class="text-center">'+value.numNoTerminadasPro+'</td>'+
                        '<td id = "td_bar_id" class="text-center"><div  class="progress"><div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: '+value.numPorcentajePro+'%;">'+value.numPorcentajePro+' %</div></div></td>'+                    
                    '</tr>'
               );    

在CSS中我使用：

#td_project_id{

vertical-align: middle;
}

并且适用于所有td，除了最后一个td：

'<td id = "td_bar_id" class="text-center"><div  class="progress"><div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: '+value.numPorcentajePro+'%;">'+value.numPorcentajePro+' %</div></div></td>'+

我使用CSS：

#td_bar_id{

vertical-align: middle;
}

但没有..

如何垂直对齐最后一个td？ （对不起，我的英文）

Answer 1

由于Bootstrap在其进度条margin-bottom: 20px;类中添加了.progress，您只需将其添加到CSS中，以便在表格单元格中正确vertically-align: middle;：

.table > tbody > tr > td {
    vertical-align: middle !important;
}
.table > tbody > tr > td > .progress {
    margin-bottom: 0px !important;
}

Answer 2

Bootstrap 4更新。只需将其添加到您的CSS中即可：

.table td, .table th {
    vertical-align: middle;
}