JS实现table表格固定表头且表头随横向滚动而滚动

作者:纸飞机时间:2026-10-22 09:31:20浏览:487

本文介绍如何使用JavaScript实现表格固定表头并支持横向滚动。核心思路是将表头与内容分离为两个独立的table,利用relative定位和滚动事件监听,动态计算滚动距离以调整表头位置,确保在横向滚动时表头始终可见且对齐。

JS实现table表格固定表头且随横向滚动

首先查看效果图。

JS实现table表格固定表头且随横向滚动

实现思路如下:

1. 表头部分使用一个table,并用一个div包裹;表格的具体内容使用另一个table。

2. 包裹表头的div采用position: relative相对定位。

3. 获取整个表格的高度。

4. 获取表格的DOM元素(或包裹表格的DOM元素)距离页面顶部的距离,即offsetTop。

5. 计算滚动的临界点距离,即表格高度加上表格距离页面顶部的距离。如果滚动距离超过该临界点,则让表头的top值归0或保持不变。

JS实现table表格固定表头且随横向滚动

当然,此处还有很多可以优化的地方,本文仅展示一种基本思路。

另外说明,表头使用红色是为了更加显眼。

以下是JavaScript代码实现。


/**
     * 最重要的一点是头和身体是两个table 然后定位用relative 然后通过滚动来计算
     * */
      function FixedHead (){
        if( !(this instanceof FixedHead) ){
          return new FixedHead()
        };
        this.$dom = $('.dataTables_scrollHead'); // 表头外层dom
        this.offsetTop = this.$dom.offset().top; // 表头外层dom距离顶部的高度
        this.parents = this.$dom.parents('.dataTables_scroll'); // 表头外层dom最外面的盒子(包裹着table的盒子)
        this.outBoxHeight = this.parents.height(); // 表头外层dom最外面的盒子(包裹着table的盒子)的高度
        this.maxHeight = this.offsetTop + this.outBoxHeight; // 滚动的零界点 最多能滚动到哪里
        this.scroll();
      }
      FixedHead.prototype = {
        constructor: FixedHead,
        scroll: function(){
          var that = this;
          $(window).scroll(function(){
            var scrollTop = $(this).scrollTop();
            if((scrollTop > that.offsetTop) && (scrollTop < that.maxHeight)){
              that.$dom.css('top', (scrollTop - that.offsetTop + 50)+'px') // 这个50是因为我的头部导航固定在顶部 高是50 所以要加上
            }else {
              var topCss = that.$dom.css('top');
              if(topCss === '0px' || topCss === 'auto'){
              }else {
                that.$dom.css('top', '0px')
              }
            }
          })
        }
      }

总结。

以上所述是小编给大家介绍的JS实现table表格固定表头且表头随横向滚动而滚动,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对本站网站的支持!

作者最新文章