表頭固定，內容可以上下左右滾動，左右滾動表頭聯動
阿新 • • 發佈：2019-02-11
準備工作 xxx.html
css: reset.min.css style.css
js: index.js jquery.min.js
一、xxx.html(內容部分多填充幾行，這裡為節省空間只拿一行做展示
<head> <link rel="stylesheet" href="css/reset.min.css"> <link rel="stylesheet" href="css/style.css"> </head> <body> <section> <h1 id='bt'>表頭固定，內容滾動</h1> <div class="tbl-header"> <table cellpadding="0" cellspacing="0" border="0"> <thead> <tr> <th>班組</th> <th>訂單號</th> <th>拉鍊名稱</th> <th>尺寸</th> <th>顏色</th> <th>款號</th> <th>排產數</th> <th>完工數</th> <th>完成情況</th> <th>繫結工票</th> </tr> </thead> </table> </div> <div class="tbl-content"> <table cellpadding="0" cellspacing="0" border="0"> <tbody id="tlist"> <tr> <td>班組一</th> <td>4564564</th> <td>尼龍</th> <td>45</th> <td>red</th> <td>48987</th> <td>3</th> <td>10</th> <td>完成</th> <td>tg98789</th> </tr> </tbody> </table> </div> </section> <script src='js/jquery.min.js'></script> <script src="js/index.js"></script> </body>
二、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可自行在網上下載）