html - 单元格填充不适用于表格单元格上的进度条

Question

我在表格单元格上有一个 Bootstrap 进度条。一切正常，除了底部有很多填充物使 table 不必要地高。

我想移除单元格底部的内边距。我尝试缩小进度条并使单元格的填充为 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，但仍然无法按照我想要的方式工作。我怎样才能剃掉一些底部空间？

Answer 1

.progress 类的底部边距为 20px

.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 中覆盖它

.progress {
    margin-bottom: 0;
}