表格的头部固定效果通过css及jquery分别实现

表格的头部固定效果是指当表格数据很多时，页面滚动时表头始终显示在页面顶部，便于查看数据。这个效果可以通过CSS和jQuery分别实现。

通过CSS实现表头固定效果

实现原理

通过CSS中的position: sticky与top属性实现，将表头固定在一定位置上，当表格区域滚动到一定位置时，表头就会被固定在页面顶部。

实现步骤

1. 在CSS中定义表格头部样式

thead {
  position: sticky;
  top: 0;
  background-color: #f1f1f1;
}

注意：上述CSS代码中的position属性必须为sticky才能实现表头固定效果。

1. 在表格中的 标签里设置thead类名.

<table>
  <thead class="thead">
    <tr>
      <th>表头1</th>
      <th>表头2</th>
      <th>表头3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>数据1</td>
      <td>数据2</td>
      <td>数据3</td>
    </tr>
    ...
  </tbody>
</table>

1. 为表格内容设置样式

tbody {
  /* 设置高度，表示表格只显示5条数据 */
  height: 80px;
  /* 开启滚动条 */
  overflow-y: scroll;
  /* 表格中设置border时会占用表格显示范围，通过设置margin-right缩小表格宽度，隐藏滚动条内容区域使滚动条hover效果更好看 */
  margin-right: -15px;
}

示例

例如下面的表格，实现表头固定效果。

表头1	表头2	表头3
数据1	数据2	数据3
数据4	数据5	数据6
...	...	...

示例代码如下：

<table>
  <thead class="thead">
    <tr>
      <th>表头1</th>
      <th>表头2</th>
      <th>表头3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>数据1</td>
      <td>数据2</td>
      <td>数据3</td>
    </tr>
    <tr>
      <td>数据4</td>
      <td>数据5</td>
      <td>数据6</td>
    </tr>
    <!-- 省略其他行数据 -->
  </tbody>
</table>

通过jQuery实现表头固定效果

实现原理

通过jQuery的scroll事件监听，当表格区域滚动到一定位置时，将表头复制到页面顶部形成固定表头。

实现步骤

1. 在HTML中定义两个表格，分别用于显示表头与表格内容。

<div class="wrap">
  <table class="table-header">
    <thead>
      <tr>
        <th>表头1</th>
        <th>表头2</th>
        <th>表头3</th>
      </tr>
    </thead>
  </table>
  <div class="table-body">
    <table>
      <tbody>
        <tr>
          <td>数据1</td>
          <td>数据2</td>
          <td>数据3</td>
        </tr>
        ...
      </tbody>
    </table>
  </div>
</div>

1. JS代码编写，实现表头复制与固定。

// 监听scroll事件
$('.table-body').on('scroll', function() {
  // 获取表头的引用
  const $thead = $('.table-header thead');
  // 若表头没有复制，则复制一个放在页面顶部
  if ($('[data-component=thead-clone]').length === 0) {
    $thead.clone(true)
      .appendTo('.table-header')
      .attr('data-component', 'thead-clone')
      .css('position', 'fixed')
      .css('top', '0')
      .css('left', '0')
      .css('background-color', '#fff');
  }
  // 判断表格是否滚动至隐藏表头的位置
  if ($(this).scrollTop() >= $thead.position().top) {
    $('[data-component=thead-clone]').show();
  } else {
    $('[data-component=thead-clone]').hide();
  }
});

示例

例如下面的表格，实现表头固定效果。

表头1	表头2	表头3
数据1	数据2	数据3
数据4	数据5	数据6
...	...	...

示例代码如下：

<div class="wrap">
  <table class="table-header">
    <thead>
      <tr>
        <th>表头1</th>
        <th>表头2</th>
        <th>表头3</th>
      </tr>
    </thead>
  </table>
  <div class="table-body">
    <table>
      <tbody>
        <tr>
          <td>数据1</td>
          <td>数据2</td>
          <td>数据3</td>
        </tr>
        <tr>
          <td>数据4</td>
          <td>数据5</td>
          <td>数据6</td>
        </tr>
        <!-- 省略其他行数据 -->
      </tbody>
    </table>
  </div>
</div>

$('.table-body').on('scroll', function() {
  const $thead = $('.table-header thead');
  if ($('[data-component=thead-clone]').length === 0) {
    $thead.clone(true)
      .appendTo('.table-header')
      .attr('data-component', 'thead-clone')
      .css('position', 'fixed')
      .css('top', '0')
      .css('left', '0')
      .css('background-color', '#fff');
  }
  if ($(this).scrollTop() >= $thead.position().top) {
    $('[data-component=thead-clone]').show();
  } else {
    $('[data-component=thead-clone]').hide();
  }
});