手把手教你制作表格表头悬浮(table-header-fixed)

最新推荐文章于 2024-08-13 08:09:15 发布

weixin_33953384

最新推荐文章于 2024-08-13 08:09:15 发布

阅读量4k

点赞数

文章标签： php javascript r语言 ViewUI

原文链接：https://juejin.im/post/5c6fbbb751882528735f3cd4

版权

本文介绍如何创建一个表格表头悬浮的交互效果，以改善用户体验。通过创建两个表格，设置表头宽度并监听滚动及页面缩放事件来实现。代码适用于Vue项目，并提供了交流联系方式。

摘要由CSDN通过智能技术生成

今天,同事问我一个问题,怎样实现表格数据很多的时候,用户滚动到下面也可以看到对应表头的交互效果,毕竟如果表头数据不熟悉,滚动到下方会不记得每列数据对应的内容,又滚动上来看表头内容这种体验很不友好,我想到了一个解决方案.

思路:

1.创建两个表格,第一个表格table1没有标题,隐藏; 2.设置table1表格的表头每一个th的宽度为第二个表格的表体的每一个td的宽度; 3.滚动监听,当表格的表头滚过视频顶部,显示table1的表头,否则,隐藏table1的表头; 4.监听页面缩放,页面缩放时重新执行步骤2;

预览效果:

代码:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>y</title>
    <style>
      * {
        padding: 0;
        margin: 0;
      }
      html, body {
        width: 100%;
        height: 100%;
      }
      .table {
        width: 100%;
        /*为表格设置合并边框属性*/
        border-collapse: collapse;
      }
      .table tr th, .table tr td {
        margin: 0;
        padding: 15px 16px 14px;
        box-sizing: border-box;                                                                                                 
      }
      .table thead th {
        background: #fafafa;
      }
      .table tr th {
        background: #fafafa;
        transition: background .3s ease;
        text-align: left;
        color: rgba(0, 0, 0, 0.85);
        font-weight: 500;
        border-bottom: 1px solid #e8e8e8;
      }
      .table tr td {
          border-bottom: 1px solid #e8e8e8;
          transition: all .3s;
      }
      .table>tbody>tr:hover {
          background: #e9f5fe;
      }
      .fixedTableHeader {
        width: calc(100% - 40px);
        display: none;
        position: fixed;
        top: 0px;
        left: 20px;
        overflow: hidden;
        margin: 0 auto;
        z-index: 999;
        transition: all 0.5s ease-in;
      }
    </style>
  </head>
  <body>
    <div>
      <p>ewdfwefgefg</p>
      <p>ewdfwefgefg</p>
      <p>ewdfwefgefg</p>
      <p>ewdfwefgefg</p>
      <p>ewdfwefgefg</p>
      <p>ewdfwefgefg</p>
      <p>ewdfwefgefg</p>
      <p>ewdfwefgefg</p>
      <p>ewdfwefgefg</p>
      <p>ewdfwefgefg</p>
      <p>ewdfwefgefg</p>
      <p>ewdfwefgefg</p>
      <p>ewdfwefgefg</p>
      <p>ewdfwefgefg</p>
      <p>ewdfwefgefg</p>
      <p>ewdfwefgefg</p>
      <p>ewdfwefgefg</p>
      <p>ewdfwefgefg</p>
      <p>ewdfwefgefg</p>
      <p>ewdfwefgefg</p>
    </div>
    <div style="padding: 20px;">
      <div id="fixedTableHeader" class="fixedTableHeader">
          <table class="table">