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

发布时间：2025-06-08 02:37:05

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 跟媒体查询。根据你的具体须要，你可能抉择最合适你的方法来把持表格的高度。盼望本文能帮助你轻松实现表格尺寸的把持。