Как я могу уменьшить высоту моего стола в bootstrap 4?

Question

Как я могу уменьшить высоту моего стола? Я пытался отрегулировать высоту на <tr> с помощью CSS, но кажется, что высота, которую он использует в данный момент, является наименьшей из возможных. Я могу сделать его больше, но все, что ниже высоты: 50 пикселей, я не замечаю разницы.

Вот мой стол сейчас. Я просто хочу уменьшить высоту строки, чтобы сжать таблицу, чтобы она помещалась на экране без прокрутки вниз.

    <table class="table table-striped">
            <thead>
              <tr>
                <th scope="col">Month</th>
                <th scope="col">Overtime Hours</th>
                <th scope="col">Compensation Hours</th>
                <th scope="col">Vacation</th>
                <th scope="col">Personal Hours</th>
                <th scope="col">Sick Hours</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <th scope="row">Carry Over</th>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
              </tr>
              <tr>
                <th scope="row">Allotted</th>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
              </tr>
              <tr>
                <th scope="row">Starting Total</th>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
              </tr>
              <tr>
                <th scope="row">Jan</th>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
              </tr>
              <tr>
                <th scope="row">Feb</th>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
              </tr>
              <tr>
                <th scope="row">Mar</th>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
              </tr>
              <tr>
                <th scope="row">Apr</th>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
              </tr>
              <tr>
                <th scope="row">May</th>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
              </tr>
              <tr>
                <th scope="row">Jun</th>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
              </tr>
              <tr>
                <th scope="row">Jul</th>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
              </tr>
              <tr>
                <th scope="row">Aug</th>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
             </tr>
             <tr>
                <th scope="row">Sep</th>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <th scope="row">Oct</th>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <th scope="row">Nov</th>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <th scope="row">Dec</th>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <th scope="row">Yearly Total</th>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <th scope="row">Balance in Hours</th>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <th scope="row">Balance in Days</th>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            </tbody>
 </table>

Answer 1

В соответствии с документацией Bootstrap:

Вы можете просто использовать table-sm в качестве дополнения к своему столу, чтобы сделать столы более компактными, сократив заполнение ячеек пополам. Это будет выглядеть так:

<table class="table table-striped table-sm">
  <thead>
...
  </thead>
  <tbody>
    <tr>
   ...
    </tr>
  </tbody>
</table>

В соответствии с рекомендациями реагирования, вы можете использовать .table-responsive{-sm|-md|-lg|-xl} по мере необходимости для создания адаптивных таблиц до определенной точки останова. С этой точки останова и далее таблица будет вести себя нормально, а не прокручиваться горизонтально.

Пример:

<div class="table-responsive-sm">
  <table class="table table-striped">
    ...
  </table>
</div>

<div class="table-responsive-md">
  <table class="table table-striped">
    ...
  </table>
</div>

<div class="table-responsive-lg">
  <table class="table table-striped">
    ...
  </table>
</div>

<div class="table-responsive-xl">
  <table class="table table-striped">
    ...
  </table>
</div>

Answer 2

, так как вы используете загрузчик. Вы можете использовать <table class="table table-striped table-sm"> класс