セルのパディングがテーブルのセルのプログレスバーで動作しない

テーブルセルにブートストラップの進行状況バーがあります。テーブルが不必要に大きくなるように底にたくさんのパディングがあることを除いて、すべてがうまく動作しています。セルのパディングがテーブルのセルのプログレスバーで動作しない

セルの底からパディングを削除したいと思います。私はプログレスバーを小さくして、セルのパディングを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クラスは、独自のCSSでこの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); 
}

オーバーライドの下マージンを持っているあなたは進捗クラスのマージン底を取り除くことができように見えます