嘿,我有这张 table :
这是代码的一部分:
$('#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? (对不起我的英语)
最佳答案
由于 Bootstrap 在其进度条 .progress
类中添加了 margin-bottom: 20px;
,因此您只需将其添加到 CSS 中即可使它们正确 vertically-align: middle;
表格单元格内:
.table > tbody > tr > td {
vertical-align: middle !important;
}
.table > tbody > tr > td > .progress {
margin-bottom: 0px !important;
}
关于javascript - 如何在 td 内垂直对齐进度条?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31997586/