Bootstrap 4 убрать пробел из заголовка - PullRequest
Новая
       3

Bootstrap 4 убрать пробел из заголовка

0 голосов
/ 01 февраля 2020

enter image description here

  1. Я хотел бы удалить пробел между заголовком таблицы и подзаголовками.

  2. Также подзаголовок «Sub1» вместе со значком должен быть выровнен по левому краю в ячейке 

          <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>

1 Ответ

1 голос
/ 01 февраля 2020

Вам нужно сделать с некоторыми css для удаления этого пробела

применить это css в ваш css файл margin-bottom: 0; удалит пробелы из table-responsive и card title

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

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

и для значка я использовал шрифт-потрясающий значок вот ссылка CDN 

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>

Вы можете редактировать или просматривать код здесь

...