本文介绍如何使用JavaScript实现表格固定表头并支持横向滚动。核心思路是将表头与内容分离为两个独立的table，利用relative定位和滚动事件监听，动态计算滚动距离以调整表头位置，确保在横向滚动时表头始终可见且对齐。
JS实现table表格固定表头且随横向滚动
首先查看效果图。
实现思路如下：
1. 表头部分使用一个table，并用一个div包裹；表格的具体内容使用另一个table。
2. 包裹表头的div采用position: relative相对定位。
3. 获取整个表格的高度。
4. 获取表格的DOM元素（或包裹表格的DOM元素）距离页面顶部的距离，即offsetTop。
5. 计算滚动的临界点距离，即表格高度加上表格距离页面顶部的距离。如果滚动距离超过该临界点，则让表头的top值归0或保持不变。
当然，此处还有很多可以优化的地方，本文仅展示一种基本思路。
另外说明，表头使用红色是为了更加显眼。
以下是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表格固定表头且表头随横向滚动而滚动，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对本站网站的支持！