📌  相关文章
📜  如何制作带有粘性表头的Bootstrap表？(1)

📅  最后修改于: 2023-12-03 15:24:04.716000             🧑  作者: Mango

如何制作带有粘性表头的 Bootstrap 表？

在前端开发中，表格是经常使用的组件，而对于表格的一些特殊需求，如滚动时固定表头，通常需要使用一些插件或手动编写代码实现。本文将介绍如何使用 Bootstrap 实现带有粘性表头的表格。

HTML 结构

使用 Bootstrap 表格的基础 HTML 结构如下：

<table class="table">
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <!-- More rows ... -->
  </tbody>
</table>

这个结构包含了表头和表格内容两个部分，使用 Bootstrap 的 table 类使表格具有默认样式。

CSS 样式

要实现带有粘性表头的表格，需要使用 CSS 的 position 和 z-index 属性。具体代码如下：

.table-fixed-header thead {
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 1;
}
.table-fixed-header tbody {
  display: block;
  margin-top: 60px; /* Set to height of header */
}
.table-fixed-header tbody tr {
  display: block;
}
.table-fixed-header tbody td,
.table-fixed-header tbody th {
  width: 25%; /* Set to the width of the table */
  float: left;
}

上面的代码中，.table-fixed-header 是自定义类名，用于与默认表格样式分离。.table-fixed-header thead 设置表头的 position 属性为 fixed，并设置 top 和 width 属性。.table-fixed-header tbody 设置表格内容的 display 属性为 block，同时设置 margin-top 使其下移，避免被表头遮挡。.table-fixed-header tbody tr 和 .table-fixed-header tbody td, .table-fixed-header tbody th 分别将每个行和单元格设置为 display:block 和 float:left，以使其能够以块级元素的形式正确地显示。

JavaScript 函数

以上 CSS 样式设置能够实现表格的固定表头，但是当表格内容较多时，用户需要进行滚动才能查看全部内容，这时候需要使用 JavaScript 函数来调整表格的高度，动态设置 margin-top。具体代码如下：

$(document).ready(function(){
  $(".table-fixed-header tbody").scroll(function(){
    $(".table-fixed-header thead").css("margin-left", -$(".table-fixed-header tbody").scrollLeft()); // Adjust table head
    $(".table-fixed-header tbody tr:first-child td").css("margin-left", $(".table-fixed-header tbody").scrollLeft()); // Adjust first row
  });
});

上述代码使用 jQuery 库，当表格内容滚动时，动态调整表头的位置和第一行单元格的位置。

完整代码

下面是完整的 HTML、CSS 和 JavaScript 代码：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Sticky Header Table</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <style> 
    .table-fixed-header thead {
      position: fixed;
      width: 100%;
      top: 0;
      z-index: 1;
    }
    .table-fixed-header tbody {
      display: block;
      margin-top: 60px; /* Set to height of header */
    }
    .table-fixed-header tbody tr {
      display: block;
    }
    .table-fixed-header tbody td,
    .table-fixed-header tbody th {
      width: 25%; /* Set to the width of the table */
      float: left;
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>Sticky Header Table</h1>
    <table class="table table-fixed-header">
      <thead>
        <tr>
          <th>#</th>
          <th>First Name</th>
          <th>Last Name</th>
          <th>Username</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>Mark</td>
          <td>Otto</td>
          <td>@mdo</td>
        </tr>
        <tr>
          <td>2</td>
          <td>Jacob</td>
          <td>Thornton</td>
          <td>@fat</td>
        </tr>
        <!-- More rows ... -->
      </tbody>
    </table>
  </div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script> 
    $(document).ready(function(){
      $(".table-fixed-header tbody").scroll(function(){
        $(".table-fixed-header thead").css("margin-left", -$(".table-fixed-header tbody").scrollLeft()); // Adjust table head
        $(".table-fixed-header tbody tr:first-child td").css("margin-left", $(".table-fixed-header tbody").scrollLeft()); // Adjust first row
      });
    });
  </script>
</body>
</html>

以上代码实现了带有粘性表头的 Bootstrap 表格，并通过 jQuery 库中的 scroll 事件实现了滚动时固定表头。