使用纯CSS实现标题栏和表格头水平滚动，同时垂直方向不滚动的效果

实力
175 阅读4分钟

在Web应用程序中，表格是一种常见的数据展示方式。然而，当表格列数很多时，表格头部往往会超出屏幕宽度，从而导致用户无法查看完整的表格内容。在这种情况下，水平滚动条就成为了唯一的解决方案。

但是，在实际的开发中，我们可能会遇到一些特殊的需求，例如固定表格头或标题栏，并保持其在浏览器窗口中的位置不变。

实现标题栏水平滚动

第一步：创建HTML结构

首先，我们需要创建一个具有表格和标题栏的HTML结构。在这个例子中，我们创建了一个包含标题栏和表格的容器元素。

<div class="container">
  <div class="title">标题栏</div>
  <table>
    <thead>
      <tr>
        <th>列1</th>
        <th>列2</th>
        <th>列3</th>
        <th>列4</th>
        <th>列5</th>
        <th>列6</th>
        <th>列7</th>
        <th>列8</th>
        <th>列9</th>
        <th>列10</th>
        <th>列11</th>
        <th>列12</th>
        <th>列13</th>
        <th>列14</th>
        <th>列15</th>
        <th>列16</th>
        <th>列17</th>
        <th>列18</th>
        <th>列19</th>
        <th>列20</th>
      </tr>
    </thead>
    <tbody>
      <!-- 表格内容 -->
    </tbody>
  </table>
</div>

第二步：设置CSS样式

接下来，我们需要设置CSS样式。首先，我们将容器元素设置为相对定位，并将标题栏设置为绝对定位。这样，我们就可以使用left和top属性来控制其在容器中的位置。

.container {
  position: relative;
}

.title {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 50px;
  background-color: #ccc;
  text-align: center;
}

然后，我们将表格元素的宽度设置为100%以填充整个容器。接下来，我们为表格头部和表格主体设置不同的样式，以便于后面的操作。

table {
  width: 100%;
  border-collapse: collapse;
}

thead {
  background-color: #eee;
}

th,
td {
  border: 1px solid #ddd;
  padding: 10px;
}

tbody {
  height: 200px;
  overflow-y: auto;
}

在这个例子中，我们将表格主体的高度设置为200像素，并使用overflow-y属性来控制垂直滚动条的出现。

第三步：使用JavaScript和jQuery实现水平滚动

接下来，我们将使用JavaScript和jQuery来实现标题栏的水平滚动。首先，我们需要在页面中引入jQuery库。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

然后，在JS文件中添加以下代码：

$(document).ready(function() {
  $(".container").scroll(function() {
    var scrollLeft = $(this).scrollLeft();
    $(".title").css("left", -scrollLeft + "px");
  });
});

这里，我们注册了一个scroll事件监听器，并使用jQuery的scrollLeft方法获取当前水平滚动条的位置。然后，我们将标题栏的left属性设置为负的滚动条位置，以达到与表格内容相反的效果，从而让标题栏始终保持固定。

实现表格头水平滚动

实现表格头水平滚动的原理与实现标题栏水平滚动基本相同，只需要对表格头进行一些调整即可。

第一步：创建HTML结构

首先，我们需要在表格头部添加一个新的tr元素，并将所有表头列放置其中。这样，我们就可以将整个表格头作为一个元素，从而更容易地控制它的样式。

<div class="container">
  <table>
    <thead>
      <tr class="header">
        <th>列1</th>
        <th>列2</th>
        <th>列3</th>
        <th>列4</th>
        <th>列5</th>
        <th>列6</th>
        <th>列7</th>
        <th>列8</th>
        <th>列9</th>
        <th>列10</th>
        <th>列11</th>
        <th>列12</th>
        <th>列13</th>
        <th>列14</th>
        <th>列15</th>
        <th>列16</th>
        <th>列17</th>
        <th>列18</th>
        <th>列19</th>
        <th>列20</th>
      </tr>
      <!-- 表格内容 -->
    </thead>
    <tbody>
      <!-- 表格内容 -->
    </### 第二步：设置CSS样式

接下来，我们需要将表格头的样式与表格主体分开。我们将表格头设置为固定定位，并将其z-index属性设置为1，以确保它始终处于表格主体上方。

```css
.header {
  position: fixed;
  top: 50px;
  left: 0;
  width: 100%;
  z-index: 1;
  background-color: #eee;
}

然后，我们将所有th元素的宽度设置为固定值，并使用white-space: nowrap属性来防止文字换行。这样，当表格头的宽度超过容器宽度时，表格头部就会自动出现水平滚动条。

th {
  width: 200px;
  white-space: nowrap;
}

为了使表格主体的内容不被表格头遮挡，我们还需要在表格主体中添加一个上边距，并将其值设置为表格头的高度。

tbody {
  height: 200px;
  overflow-y: auto;
  margin-top: 50px; /* 表格头高度 */
}

第三步：使用JavaScript和jQuery实现水平滚动

最后，我们需要添加以下JavaScript代码，来控制表格头的水平滚动。

$(document).ready(function() {
  $(".container").scroll(function() {
    var scrollLeft = $(this).scrollLeft();
    $(".header").css("left", -scrollLeft + "px");
  });
});

这里的代码与实现标题栏水平滚动的代码基本相同，但是我们将标题栏改为了表格头。使用scrollLeft方法获取当前水平滚动条的位置，并将表格头的left属性设置为负的滚动条位置，以确保它始终保持在正确的位置。

总结

在本文中，我们介绍了如何使用纯CSS和JavaScript来实现标题栏和表格头的水平滚动，同时保持垂直方向的不滚动。通过使用固定定位和z-index属性，我们可以轻松地控制表格头或标题栏的位置。此外，使用JavaScript和jQuery可以帮助我们检测水平滚动条的位置，并相应地调整元素的位置，从而实现一种更好的用户体验。

avatar
文章
阅读
粉丝