Bootstrap 4 从标题中删除白色 space

Question

我想删除 Table 标题和副标题之间的白色 space。

此外，子标题 "Sub1" 连同图标应 left-aligned 在单元格

内

      <div class="mdc-layout-grid__cell stretch-card mdc-layout-grid__cell--span-3">
        <div class="mdc-card p-0">
          <h6 class="card-title">Table title</h6>
          <div class="table-responsive">
            <table class="table">
              <thead bgcolor="#aed581">
                <tr>
                  <th>
                    <span class="text-left">Sub1</span>
                    <span class="material-icons refresh-icon">refresh</span>
                  </th>
                  <th>Sub2</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td class="text-left">A</td>
                  <td>18.5%</td>
                </tr>
                <tr>
                  <td class="text-left">B</td>
                  <td>16.3%</td>
                </tr>
                <tr>
                  <td class="text-left">V</td>
                  <td>15.5%</td>
                </tr>
            </table>
          </div>
        </div>
      </div>

Answer 1

你需要做一些 css 来删除 space

将此 css 应用到您的 css 文件中 margin-bottom: 0; 将从 table-responsive 和 card title

中删除 space

.card-title{
  background-color: #aed581;
  padding: 15px;
  font-weight: bold;
  margin-bottom: 0;
}

.fa-repeat{
  color: lightgray;
  cursor: pointer;
}

对于图标，我使用了很棒的字体图标，这里是 CDN link

https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css

这是HTML

<div class="mdc-layout-grid__cell stretch-card mdc-layout-grid__cell--span-3">
            <div class="mdc-card p-0">
              <h6 class="card-title">Table title</h6>
              <div class="table-responsive">
                <table class="table">
                  <thead bgcolor="#aed581">
                    <tr>
                      <th>
                      <i class="fa fa-repeat"></i>
                       Sub1
                        <!-- <span class="material-icons refresh-icon">refresh</span> -->
                      </th>
                      <th>Sub2</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <td class="text-left">A</td>
                      <td>18.5%</td>
                    </tr>
                    <tr>
                      <td>B</td>
                      <td>16.3%</td>
                    </tr>
                    <tr>
                      <td>V</td>
                      <td>15.5%</td>
                    </tr>
                </table>
              </div>
            </div>
          </div>

您可以编辑或预览 code here

Bootstrap 4 从标题中删除白色 space

Bootstrap 4 eliminate white space from title

html

responsive-design

bootstrap-4