表头固定，内容可以上下左右滚动，左右滚动表头联动

准备工作                 xxx.html

css:   reset.min.css         style.css

js:      index.js                  jquery.min.js

一、xxx.html(内容部分多填充几行，这里为节省空间只拿一行做展示

    
    


    

        
表头固定，内容滚动
          

            
              
                 
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                
            
        
班组
订单号
拉链名称
尺寸
颜色
款号
排产数
完工数
完成情况
绑定工票
    
    

        
           
                
                    
           
        
班组一
                    
4564564
                    
尼龙
                    
45
                    
red
                    
48987
                    
3
                    
10
                    
完成
                    
tg98789
                
    
  
      
      

二、css样式一：reset.min.css

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}

       css样式二：style.css

h1{
  font-size: 20px;
  color: #fff;
  text-transform: uppercase;
  font-weight: 300;
  text-align: center;
  margin-bottom: 15px;
}
table{
  width:700px;
  table-layout: fixed;
  WORD-BREAK:break-all;
}
.tbl-header{
  background-color: rgba(255,255,255,0.3);
  overflow:hidden;
  left: 0;
  right: 0;
 }
.tbl-content{
  height:650px;
  overflow-x:auto;
  margin-top: 0px;
  border: 1px solid rgba(255,255,255,0.3);
  background-color: rgba(255,255,255,0.3);
}
th{
  padding: 20px 15px;
  text-align: left;
  font-weight: 500;
  font-size: 12px;
  color: #fff;
  text-transform: uppercase;
}
td{
  padding: 15px;
  text-align: left;
  vertical-align:middle;
  font-weight: 300;
  font-size: 12px;
  color: #fff;
  border-bottom: solid 1px rgba(255,255,255,0.1);
}

/* demo styles */
@import url(https://fonts.googleapis.com/css?family=Roboto:400,500,300,700);
body{
  background: -webkit-linear-gradient(left, #25c481, #25b7c4);
  background: linear-gradient(to right, #25c481, #25b7c4);
  font-family: 'Roboto', sans-serif;
}
section{
  margin: 10px;
}

/* for custom scrollbar for webkit browser*/

::-webkit-scrollbar {
    width: 6px;
} 
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
} 
::-webkit-scrollbar-thumb {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
}

三：js文件一：index.js 

$(window).on("load resize ", function() {
    var scrollWidth = $('.tbl-content').width() - $('.tbl-content table').width();
    $('.tbl-header').css({'padding-right':scrollWidth});
}).resize();

$(function(){
    $('.tbl-content').on('scroll', function () {
        $(".tbl-header").scrollLeft($('.tbl-content').scrollLeft());
    });
})

​

       js文件二：jquery.min.js（jquery可自行在网上下载）