заставляя начальную ячейку 4 вести себя как гистограмма

Question

Я использую таблицу начальной загрузки 4.Я хочу, чтобы один из столбцов вел себя как столбец в гистограмме (см. Изображение в приложении).У меня работает условная часть ширины, но «bar» не будет заполнять height ячейки таблицы.Кто-нибудь знает, как заставить его заполнить 90% высоты клетки?Обратите внимание, что текст должен быть вертикально центрирован в "баре"

код, используемый для получения гистограммы, выглядит следующим образом (опуская ненужные биты)

<div class="container">
    <div class="row">
        <div class="col-12 col-xs-12 col-sm-12 col-md-12 col-lg-12">
            <table class="table table-borderless">
                <thead>
                    <tr>
                        <!-- <th scope="col">Rank</th> -->
                        <th scope="col">Items</th>
                        <th scope="col">Number</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>
                            <div style="width: 75%; 
                                  background: rgb(128, 177, 133); 
                                  overflow:visible;">
                                Item 1
                            </div>
                        </td>
                        <td>
                            7
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

Answer 1

Вам необходимо установить height для <td> и удалить его отступы.Попробуйте код ниже.

.bar-container {
  height: 1px;
  padding: 0 !important;
}

.bar {
  width: 10%;
  background: rgb(128, 177, 133);
  overflow: visible;
  height: calc(100% - 2px);
  display: flex;
  align-items: center;
  white-space: nowrap;
  padding: 1px 0;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div class="container">
  <div class="row">
    <div class="col-12 col-xs-12 col-sm-12 col-md-12 col-lg-12">
      <table class="table table-borderless">
        <thead>
          <tr>
            <!-- <th scope="col">Rank</th> -->
            <th scope="col">Items</th>
            <th scope="col">Number</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td class="bar-container">
              <div class="bar">
                Item 1
              </div>
            </td>
            <td>
              7
            </td>
          </tr>
          <tr>
            <td class="bar-container">
              <div class="bar" style="width:50%;">
                Item 1
              </div>
            </td>
            <td>
              7
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

Answer 2

Удалить заполнение TD и добавить

<td style="padding: 0;">
    <div style="width: 75%; background: rgb(128, 177, 133); 
         overflow:visible;  padding:0.75rem;">

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div class="container">
    <div class="row">
        <div class="col-12 col-xs-12 col-sm-12 col-md-12 col-lg-12">
            <table class="table table-borderless">
                <thead>
                    <tr>
                        <!-- <th scope="col">Rank</th> -->
                        <th scope="col">Items</th>
                        <th scope="col">Number</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td style="padding: 0;">
                            <div style="width: 75%; 
                                  background: rgb(128, 177, 133); 
                                  overflow:visible;  padding:0.75rem;">
                                Item 1
                            </div>
                        </td>
                        <td>
                            7
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

Answer 3

Td имеет значение отступа сверху и снизу.Вам нужно уменьшить это значение как ::

tr td {
 padding-top: 2px;
 padding-bottom: 2px;
}