單元格填充與表單元格上的進度條無關

我在表單元格上有一個引導程序進度條。一切工作正常，除了在底部有很多填充使桌子不必要地高。單元格填充與表單元格上的進度條無關

我想從單元格底部刪除填充。我試圖讓進度條更小，並使單元格的填充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