Question

我在表格单元格上有一个bootstrap进度条。一切都工作得很好，除了底部有很多填充物使得桌子不必要地高。

我想从单元格的底部删除填充。我试着让进度条变小，让单元格填充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;
}

Answer 2

看起来你可以摆脱进度类的底线：

.progress {
    margin-bottom: 0;
}

链接到小提琴：https://jsfiddle.net/czcz/z6skp8nx/

单元格填充不能与表格单元格上的进度条一起使用

2 个答案: