单元格填充与表单元格上的进度条无关

我在表单元格上有一个引导程序进度条。一切工作正常，除了在底部有很多填充使桌子不必要地高。单元格填充与表单元格上的进度条无关

我想从单元格底部删除填充。我试图让进度条更小，并使单元格的填充0px，但仍然不按我想要的方式工作。我怎样才能剃掉一些底部空间？

 .progress { 
     height: 10px; 
    } 
     .table > tbody > tr > td{ 
      padding-top: 2px; 
     padding-bottom: 0px; 

     } 

<table cellspacing="0" cellpadding="0" class="table table-striped"> 
    <tbody> 
    <tr> 
     <th>Progress</th> 
     <th>CustomerID</th> 
     <th>Name</th> 
    </tr> 

    <tr> 
     <td> 
     <div class="progress"> 
      <div id="10010" class="progress-bar progress-bar-info progress-bar-striped active" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width:20%;"> </div> 

     </div> 
     </td> 
     <td>NYC</td> 
     <td>123</td> 

    </tr> 

    <tr> 
     <td> 
     <div class="progress"> 
      <div id="10012" class="progress-bar progress-bar-info progress-bar-striped active" role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" style="width:30%;"> </div> 

     </div> 
     </td> 
     <td>CT</td> 
     <td>1001</td> 

    </tr> 

    <tr> 
     <td> 
     <div class="progress"> 
      <div id="10013" class="progress-bar progress-bar-info progress-bar-striped active" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width:50%;"> </div> 

     </div> 
     </td> 
     <td>ME</td> 
     <td>10013</td> 

    </tr> 


    </tbody> 
</table>

jsfiddle

我想删除从电池的底部填充。我试图让进度条更小，并使单元格的填充0px，但仍然不按我想要的方式工作。我怎样才能剃掉一些底部空间？

来源

2016-12-01 causita

的.progress类有20像素

.progress { 
    height: 20px; 
    margin-bottom: 20px; 
    overflow: hidden; 
    background-color: #f5f5f5; 
    border-radius: 4px; 
    -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.1); 
    box-shadow: inset 0 1px 2px rgba(0,0,0,.1); 
}

覆盖的底边这在自己的CSS