【Bootstrap 4表格高度设置全攻略】轻松实现表格尺寸控制

Bootstrap 4 是一个流行的前端框架，它提供了许多内置的组件来帮助开发者快速构建响应式网站。表格是网页设计中常见的一个组件，而在 Bootstrap 4 中，表格的使用也非常简单。但是，有时候我们需要对表格的高度进行控制，以便更好地适应不同的布局和设计需求。本文将详细介绍如何在 Bootstrap 4 中设置表格的高度。

1. 基础表格结构

在 Bootstrap 4 中，表格的基本结构是通过 <table> 元素来定义的，并可以使用 .table 类来使表格看起来更加美观。

<table class="table">
  <thead>
    <tr>
      <th>Header</th>
      <th>Header</th>
      <th>Header</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
    </tr>
    <!-- 更多行数据 -->
  </tbody>
</table>

2. 设置表格高度

2.1 使用 CSS 设置高度

如果你想要设置整个表格的高度，可以通过添加 CSS 类或直接编写 CSS 代码来实现。

2.1.1 使用 CSS 类

Bootstrap 提供了 .table-sm 和 .table-lg 类来分别设置小号和大号表格的高度，但你可能需要更精确的控制。

<table class="table table-height">
  <!-- 表格内容 -->
</table>

2.1.2 直接编写 CSS 代码

你可以直接在 <style> 标签中定义表格的高度。

<style>
  .table-height {
    height: 300px; /* 设置表格高度为 300px */
    overflow-y: auto; /* 如果表格内容超出高度，则显示滚动条 */
  }
</style>

2.2 使用 JavaScript 设置高度

除了 CSS，你也可以使用 JavaScript 来动态设置表格的高度。

<script>
  document.addEventListener('DOMContentLoaded', function() {
    var table = document.querySelector('.table-height');
    table.style.height = '300px'; // 设置表格高度为 300px
  });
</script>

2.3 使用媒体查询

如果你想要根据不同的屏幕尺寸设置不同的表格高度，可以使用媒体查询来实现。

<style>
  @media (max-width: 768px) {
    .table-height {
      height: 200px;
    }
  }
</style>

3. 垂直滚动

如果你设置的表格高度小于内容高度，表格将自动显示垂直滚动条。

<style>
  .table-height {
    height: 200px;
    overflow-y: auto;
  }
</style>

4. 实际应用案例

以下是一个简单的表格，演示了如何设置表格的高度。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
  <style>
    .table-height {
      height: 300px;
      overflow-y: auto;
    }
  </style>
</head>
<body>
  <div class="container">
    <table class="table table-height">
      <thead>
        <tr>
          <th>Header</th>
          <th>Header</th>
          <th>Header</th>
        </tr>
      </thead>
      <tbody>
        <!-- 假设有 100 行数据 -->
        <tr>
          <td>Data</td>
          <td>Data</td>
          <td>Data</td>
        </tr>
        <!-- 更多行数据 -->
      </tbody>
    </table>
  </div>
</body>
</html>

5. 总结

在 Bootstrap 4 中设置表格的高度可以通过多种方式实现，包括 CSS 类、CSS 代码、JavaScript 和媒体查询。根据你的具体需求，你可以选择最适合你的方法来控制表格的高度。希望本文能帮助你轻松实现表格尺寸的控制。