时间戳

首页 > 解决方案 > 如何在 bootstrap 4 中使我的桌子高度更小？

html - 如何在 bootstrap 4 中使我的桌子高度更小？

问题描述

我怎样才能让我的桌子高度变小？我已经尝试<tr>通过 CSS 调整高度，但似乎它当前使用的高度是最小的。我可以把它变大，但任何高度都低于：50px，我没有注意到有什么不同。

这是我的桌子。我只想使行高更小以压缩表格，使其适合屏幕而无需向下滚动。

表格图片

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

标签： htmlcsshtml-tablebootstrap-4

解决方案

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

推荐阅读