HTML 在 Bootstrap 中给表格和行设置高度

在本文中，我们将介绍在使用 Bootstrap 框架时如何给表格和行设置高度。

HTML 表格是用于在网页上显示数据的一种常见方式。而 Bootstrap 是一个流行的前端框架，为开发人员提供了一套易于使用且功能强大的工具和样式，使我们能够轻松地创建美观且响应式的网页应用程序。

阅读更多：HTML 教程

表格高度的设置

要给表格设置高度，我们可以使用 Bootstrap 提供的样式类。通过使用类名 table 和 table-height，我们可以定义表格的高度。

下面是一个示例：

<table class="table table-height">
  <tr>
    <th>姓名</th>
    <th>年龄</th>
    <th>城市</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>25</td>
    <td>北京</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>30</td>
    <td>上海</td>
  </tr>
  <tr>
    <td>王五</td>
    <td>28</td>
    <td>广州</td>
  </tr>
</table>

上述代码中，我们在 <table> 标签上添加了 table 和 table-height 类名。这将为表格设置默认的样式并使其具有固定的高度。

行高度的设置

要给表格中的行设置高度，我们可以使用 CSS 的样式规则。

下面是一个示例：

<style>
  .table-row {
    height: 50px;
  }
</style>

<table class="table">
  <tr class="table-row">
    <th>姓名</th>
    <th>年龄</th>
    <th>城市</th>
  </tr>
  <tr class="table-row">
    <td>张三</td>
    <td>25</td>
    <td>北京</td>
  </tr>
  <tr class="table-row">
    <td>李四</td>
    <td>30</td>
    <td>上海</td>
  </tr>
  <tr class="table-row">
    <td>王五</td>
    <td>28</td>
    <td>广州</td>
  </tr>
</table>

在上述代码中，我们定义了一个样式类 .table-row，并将行高设置为 50px。然后，我们在每个 <tr> 标签上应用了该样式，从而使每行具有相同的高度。